From 0be46e16cb80d71c4e957d0622e07a7a254c2afa Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Fri, 11 Sep 2026 10:02:11 +0530
Subject: [PATCH 01/22] Update text on system admin UI

---
 .../src/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/apps/admin/src/platform/gamification-admin/src/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx b/src/apps/admin/src/platform/gamification-admin/src/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
index b2dd7b27a..9242953a4 100644
--- a/src/apps/admin/src/platform/gamification-admin/src/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
+++ b/src/apps/admin/src/platform/gamification-admin/src/pages/badge-detail/ManualAwardTab/ManualAwardTab.tsx
@@ -65,10 +65,6 @@ const ManualAwardTab: FC<ManualAwardTabProps> = (props: ManualAwardTabProps) =>
         <div className={styles.tabWrap}>
             <h3>Manual Award</h3>
             <div className={styles.manualFormWrap}>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Neque ullamcorper neque sed orci, enim amet, sed.
-                </p>
                 <div className={styles.manualForm}>
                     <InputHandleAutocomplete
                         label='Select Member'

From b2cf65797d209fe1795440ca6a32c0cd146c2b81 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Tue, 15 Sep 2026 13:49:53 +1000
Subject: [PATCH 02/22] fix(PM-6323): apply component navigation and dropdown
 colors

---
 .../DropdownMenu/DropdownMenu.module.scss     |  6 +++++-
 src/apps/work/README.md                       |  8 +++++++
 .../components/NavTabs/NavTabs.module.scss    |  9 ++++++--
 .../ProjectListTabs.module.scss               | 21 +++++++------------
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.module.scss b/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.module.scss
index 548a0d707..76e310d60 100644
--- a/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.module.scss
+++ b/src/apps/admin/src/lib/components/common/DropdownMenu/DropdownMenu.module.scss
@@ -22,8 +22,12 @@
             color: $black-100;
             padding: $sp-2 $sp-4;
 
+            a {
+                color: inherit;
+            }
+
             &:hover:not(.disabled) {
-                background: $turq-160;
+                background: var(--tc-2026-teal, #{$turq-160});
                 color: $tc-white;
                 cursor: pointer;
             }
diff --git a/src/apps/work/README.md b/src/apps/work/README.md
index 71fa4afca..f04ba6d99 100644
--- a/src/apps/work/README.md
+++ b/src/apps/work/README.md
@@ -20,6 +20,14 @@ The Work app provides work management capabilities for:
 
 `config/routes.config.ts` contains route ids and the `rootRoute` resolver based on the active subdomain.
 
+## Navigation styles
+
+The Work subnavigation uses regular black text and a bold active item on desktop
+and mobile. Project section tabs use black text with a bold teal active label and
+underline. These component styles override the shared theme's general link color.
+System Admin dropdown links similarly inherit their menu row color: black by
+default and white on a teal hover background.
+
 ## Providers
 
 `WorkApp.tsx` composes these providers:
diff --git a/src/apps/work/src/lib/components/NavTabs/NavTabs.module.scss b/src/apps/work/src/lib/components/NavTabs/NavTabs.module.scss
index 71c250cdc..03f9ca62b 100644
--- a/src/apps/work/src/lib/components/NavTabs/NavTabs.module.scss
+++ b/src/apps/work/src/lib/components/NavTabs/NavTabs.module.scss
@@ -73,9 +73,15 @@
 
             li {
                 font-family: 'Nunito Sans', sans-serif;
+                font-weight: 400;
                 margin-left: $sp-8;
                 color: var(--FontColor);
 
+                .tabLink {
+                    color: inherit;
+                    font-weight: inherit;
+                }
+
                 &.active {
                     font-weight: 700;
                 }
@@ -112,8 +118,7 @@
                         width: 100%;
 
                         &.active {
-                            background-color: var(--Actived);
-                            color: var(--invertButtonColor);
+                            color: var(--FontColor);
                         }
                     }
                 }
diff --git a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.module.scss b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.module.scss
index f1fc91a77..0003a4f33 100644
--- a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.module.scss
+++ b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.module.scss
@@ -9,25 +9,18 @@
     border-bottom: 1px solid #d5d5d5;
 }
 
-.tabLink {
+.container .tabLink {
     display: inline-block;
     padding: 10px 0;
     border-bottom: 2px solid transparent;
-    color: $black-60;
+    color: $black-100;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     text-decoration: none;
-}
-
-.tabLink:hover {
-    color: $black-60;
-}
-
-.active {
-    color: #2a62d5;
-    border-bottom-color: #2a62d5;
 
-    &:hover {
-        color: #2a62d5;
+    &.active {
+        color: var(--tc-2026-teal, #00797a);
+        border-bottom-color: var(--tc-2026-teal, #00797a);
+        font-weight: 700;
     }
 }

From e0bab7e8480c5acf8d18d4adccb68ae6b2c3a199 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Tue, 15 Sep 2026 13:55:09 +1000
Subject: [PATCH 03/22] fix(PM-6324): scroll submission actions to the upload
 form

---
 src/apps/opportunities/README.md               |  6 +++++-
 .../pages/ChallengeDetailsPage.flows.spec.tsx  | 14 ++++++++++++++
 .../src/pages/ChallengeDetailsPage.module.scss |  1 +
 .../src/pages/ChallengeDetailsPage.tsx         | 18 +++++++++++++++++-
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/apps/opportunities/README.md b/src/apps/opportunities/README.md
index 1dfa05d2e..c888efedc 100644
--- a/src/apps/opportunities/README.md
+++ b/src/apps/opportunities/README.md
@@ -443,7 +443,11 @@ An empty Winners tab reflects the challenge lifecycle: cancelled challenges
 state that no winners were selected, drafts explain that judging has not run,
 and active challenges retain the ongoing-review guidance.
 
-Registered members submit without leaving challenge details. My Submissions
+Registered members submit without leaving challenge details. The prize card's
+Submit a solution action revalidates registration, opens My Submissions, and
+scrolls the rendered upload panel below the fixed navigation. The scroll is
+instant when reduced motion is preferred; repeated clicks return to the open
+form. Selecting ordinary tabs does not trigger this upload scroll. My Submissions
 also exposes the environment-specific Review App handoff before and after an
 upload. File-backed rows expose the authorized download action for every
 challenge track, while authored external-URL rows omit that file action. The
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
index c970c97cf..6c31f888c 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
@@ -1124,6 +1124,10 @@ describe('ChallengeDetailsPage member flows', () => {
         mockRegistration = { id: 'resource-id' }
 
         renderPage()
+        const panel = screen.getByRole('tabpanel')
+        const scrollIntoView = jest.fn()
+        panel.scrollIntoView = scrollIntoView
+        expect(scrollIntoView).not.toHaveBeenCalled()
         fireEvent.click(screen.getByRole('button', { name: 'Submit a solution' }))
 
         await waitFor(() => expect(screen.getByRole('tab', { name: 'My Submissions' }))
@@ -1132,9 +1136,19 @@ describe('ChallengeDetailsPage member flows', () => {
             .toHaveBeenCalledTimes(1)
         expect(screen.getByText('Submission upload form'))
             .toBeInTheDocument()
+        expect(scrollIntoView)
+            .toHaveBeenCalledWith({ behavior: 'smooth', block: 'start' })
+        expect(panel)
+            .toHaveAttribute('id', 'challenge-panel-mine')
+
+        fireEvent.click(screen.getByRole('button', { name: 'Submit a solution' }))
+        await waitFor(() => expect(scrollIntoView)
+            .toHaveBeenCalledTimes(2))
         fireEvent.click(screen.getByRole('button', { name: 'Back to submissions' }))
         expect(screen.getByText('You have no submissions yet'))
             .toBeInTheDocument()
+        expect(scrollIntoView)
+            .toHaveBeenCalledTimes(2)
     })
 
     it('keeps the upload mounted and challenge tabs locked until an active upload finishes', async () => {
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss b/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
index d81af22c2..761bcbffb 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
@@ -110,6 +110,7 @@
 
 .mainContent {
     min-width: 0;
+    scroll-margin-top: 80px;
 }
 
 .requirements {
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
index 71bbf0040..e841da733 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
@@ -7,6 +7,7 @@ import {
     SyntheticEvent,
     useEffect,
     useMemo,
+    useRef,
     useState,
 } from 'react'
 import {
@@ -356,6 +357,8 @@ export const ChallengeDetailsPage: FC = () => {
     const [registrationBusy, setRegistrationBusy] = useState(false)
     const [registrantsRevision, setRegistrantsRevision] = useState(0)
     const [submissionFlowOpen, setSubmissionFlowOpen] = useState(false)
+    const [submissionScrollRequest, setSubmissionScrollRequest] = useState(0)
+    const submissionPanelRef = useRef<HTMLElement>(null)
     const [submissionUploadBusy, setSubmissionUploadBusy] = useState(false)
     const [unregisterConfirmOpen, setUnregisterConfirmOpen] = useState(false)
     const [visibleTerms, setVisibleTerms] = useState<ChallengeTerm[]>([])
@@ -421,6 +424,7 @@ export const ChallengeDetailsPage: FC = () => {
         setIssueOpen(false)
         setRegistrationBusy(false)
         setSubmissionFlowOpen(false)
+        setSubmissionScrollRequest(0)
         setSubmissionUploadBusy(false)
         setTermsMode('view')
         setTermsOpen(false)
@@ -482,6 +486,15 @@ export const ChallengeDetailsPage: FC = () => {
         || registrationAccessIsLoading
         || memberResourceAccessIsLoading
 
+    useEffect(() => {
+        if (!submissionScrollRequest || !submissionFlowOpen || activeTab !== 'mine') return
+
+        submissionPanelRef.current?.scrollIntoView?.({
+            behavior: window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+            block: 'start',
+        })
+    }, [activeTab, submissionFlowOpen, submissionScrollRequest])
+
     useEffect(() => {
         if (!challenge || !searchParams.has('tab') || tabAccessIsLoading || requestedTabIsVisible) return
 
@@ -554,7 +567,8 @@ export const ChallengeDetailsPage: FC = () => {
 
     /**
      * Opens the Figma submission flow under the member's revalidated My Submissions tab
-     * only while the challenge accepts submissions.
+     * only while the challenge accepts submissions, then scrolls the rendered upload
+     * panel into view. Repeated clicks also return to the open upload panel.
      *
      * @returns promise settled after selecting the tab, restoring registration state,
      * or redirecting an anonymous member to sign in.
@@ -570,6 +584,7 @@ export const ChallengeDetailsPage: FC = () => {
         if (!await validateSubmissionRegistration()) return
         selectTab('mine')
         setSubmissionFlowOpen(true)
+        setSubmissionScrollRequest(request => request + 1)
     }
 
     /**
@@ -817,6 +832,7 @@ export const ChallengeDetailsPage: FC = () => {
                     aria-labelledby={`challenge-tab-${activeTab}`}
                     className={styles.mainContent}
                     id={`challenge-panel-${activeTab}`}
+                    ref={submissionPanelRef}
                     role='tabpanel'
                 >
                     <ChallengeTabContent

From 22c8550e41c26d7a1fa3893e0ec7b736f7f07639 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Tue, 15 Sep 2026 13:55:10 +1000
Subject: [PATCH 04/22] fix(PM-6231): persist pending final deliverable file
 types

---
 .../src/lib/models/ChallengeEditor.model.ts   |  2 +
 .../lib/utils/challenge-editor.utils.spec.ts  | 25 ++++++
 .../src/lib/utils/challenge-editor.utils.ts   |  4 +-
 .../src/lib/utils/final-deliverables.utils.ts | 90 +++++++++++++++++++
 .../challenges/ChallengeEditorPage/README.md  |  2 +-
 .../components/ChallengeEditorForm.tsx        |  5 +-
 .../FinalDeliverablesField.spec.tsx           | 41 +++++++++
 .../FinalDeliverablesField.tsx                | 83 ++++-------------
 8 files changed, 181 insertions(+), 71 deletions(-)
 create mode 100644 src/apps/work/src/lib/utils/final-deliverables.utils.ts

diff --git a/src/apps/work/src/lib/models/ChallengeEditor.model.ts b/src/apps/work/src/lib/models/ChallengeEditor.model.ts
index 3b39d0c5a..1652ab78f 100644
--- a/src/apps/work/src/lib/models/ChallengeEditor.model.ts
+++ b/src/apps/work/src/lib/models/ChallengeEditor.model.ts
@@ -37,6 +37,8 @@ export interface ChallengeEditorFormData extends Omit<Partial<Challenge>, 'id' |
     copilot?: string
     description: string
     discussionForum?: boolean
+    /** Pending file type included in final-deliverables metadata when creating or saving. */
+    finalDeliverable?: string
     funChallenge?: boolean
     wiproAllowed?: boolean
     groups?: string[]
diff --git a/src/apps/work/src/lib/utils/challenge-editor.utils.spec.ts b/src/apps/work/src/lib/utils/challenge-editor.utils.spec.ts
index 9f3ce23ae..bd646fd94 100644
--- a/src/apps/work/src/lib/utils/challenge-editor.utils.spec.ts
+++ b/src/apps/work/src/lib/utils/challenge-editor.utils.spec.ts
@@ -24,6 +24,31 @@ jest.mock('~/config', () => ({
     }),
 }), { virtual: true })
 
+describe('final deliverables save mapping', () => {
+    it.each<[string, string[]]>([
+        [' PDF ', ['PNG', 'PDF']],
+        [' png ', ['PNG']],
+        ['  ', ['PNG']],
+    ])('includes pending input %j without duplicating or losing existing metadata', (finalDeliverable, expected) => {
+        const formData = transformChallengeToFormData({
+            metadata: [
+                { name: 'fileTypes', value: '["PNG"]' },
+                { name: 'allowStockArt', value: 'true' },
+            ],
+        })
+        const saved = transformFormDataToChallenge({ ...formData, finalDeliverable })
+
+        expect(saved.metadata)
+            .toEqual(expect.arrayContaining([
+                { name: 'fileTypes', value: JSON.stringify(expected) },
+                { name: 'allowStockArt', value: 'true' },
+            ]))
+        expect(saved).not.toHaveProperty('finalDeliverable')
+        expect(transformChallengeToFormData(saved).finalDeliverable)
+            .toBe('')
+    })
+})
+
 describe('formatLastSaved', () => {
     it('reports when a challenge has not been saved', () => {
         expect(formatLastSaved())
diff --git a/src/apps/work/src/lib/utils/challenge-editor.utils.ts b/src/apps/work/src/lib/utils/challenge-editor.utils.ts
index 6c5118310..ea533975d 100644
--- a/src/apps/work/src/lib/utils/challenge-editor.utils.ts
+++ b/src/apps/work/src/lib/utils/challenge-editor.utils.ts
@@ -36,6 +36,7 @@ import {
     metadataToBoolean,
     metadataToGiteaTeams,
 } from './metadata.utils'
+import { commitPendingFinalDeliverable } from './final-deliverables.utils'
 
 interface BillingInfo {
     billingAccountId?: number | string
@@ -1031,6 +1032,7 @@ export function transformChallengeToFormData(
         createdBy: normalizeOptionalString(challenge?.createdBy),
         description,
         discussionForum: normalizeOptionalBoolean(challenge?.discussionForum),
+        finalDeliverable: '',
         funChallenge: normalizeOptionalBoolean(challenge?.funChallenge) || false,
         giteaTeams: metadataToGiteaTeams(metadata, GITEA_METADATA_FIELD),
         groups: normalizeStringArray(challenge?.groups),
@@ -1087,7 +1089,7 @@ export function transformFormDataToChallenge(
         && formData.phases.length > 0
     const isSchedulingEnabled = isSchedulingApiEnabled(formData.legacy?.useSchedulingAPI)
         || hasEditableSchedule
-    const metadataWithoutMilestone = normalizeMetadataEntries(formData.metadata)
+    const metadataWithoutMilestone = normalizeMetadataEntries(commitPendingFinalDeliverable(formData).metadata)
         .filter(metadataEntry => !MILESTONE_METADATA_KEYS.includes(metadataEntry.name))
     const metadataWithTestChallenge = booleanToMetadata(
         metadataWithoutMilestone,
diff --git a/src/apps/work/src/lib/utils/final-deliverables.utils.ts b/src/apps/work/src/lib/utils/final-deliverables.utils.ts
new file mode 100644
index 000000000..dbc1faf3d
--- /dev/null
+++ b/src/apps/work/src/lib/utils/final-deliverables.utils.ts
@@ -0,0 +1,90 @@
+import { ChallengeEditorFormData } from '../models'
+
+import { getMetadataValue, setMetadataValue } from './metadata.utils'
+
+export const FILE_TYPES_METADATA_NAME = 'fileTypes'
+
+/**
+ * Normalizes a single final-deliverable label coming from either user input or saved metadata.
+ *
+ * @param value raw file-type value from the input or metadata payload.
+ * @returns the trimmed file-type label, or `undefined` when the value is empty.
+ * @throws Does not throw.
+ */
+export function normalizeFileTypeValue(value: unknown): string | undefined {
+    if (typeof value !== 'string') {
+        return undefined
+    }
+
+    const normalizedValue = value.trim()
+
+    return normalizedValue || undefined
+}
+
+/**
+ * Parses the persisted `fileTypes` challenge metadata into a unique, display-ready list.
+ *
+ * @param value serialized challenge metadata entry for final deliverables.
+ * @returns normalized file-type labels in the saved order, excluding empty or duplicate values.
+ * @throws Does not throw; invalid JSON produces an empty list.
+ */
+export function parseFileTypesMetadata(value: string | undefined): string[] {
+    if (!value) {
+        return []
+    }
+
+    try {
+        const parsedValue = JSON.parse(value) as unknown
+
+        if (!Array.isArray(parsedValue)) {
+            return []
+        }
+
+        const addedFileTypes = new Set<string>()
+
+        return parsedValue
+            .map(item => normalizeFileTypeValue(item))
+            .filter((item): item is string => {
+                if (!item) {
+                    return false
+                }
+
+                const normalizedKey = item.toLowerCase()
+
+                if (addedFileTypes.has(normalizedKey)) {
+                    return false
+                }
+
+                addedFileTypes.add(normalizedKey)
+
+                return true
+            })
+    } catch {
+        return []
+    }
+}
+
+/**
+ * Includes a pending final-deliverable input in create and save payloads.
+ *
+ * @param formData editor values, including the unfinished file-type input.
+ * @returns form values with a unique, trimmed file type in metadata and a cleared input.
+ * @throws Does not throw; malformed saved metadata is treated as an empty list.
+ */
+export function commitPendingFinalDeliverable(formData: ChallengeEditorFormData): ChallengeEditorFormData {
+    const value = normalizeFileTypeValue(formData.finalDeliverable)
+    if (!value) return formData
+
+    const fileTypes = parseFileTypesMetadata(getMetadataValue(formData.metadata, FILE_TYPES_METADATA_NAME))
+    const isDuplicate = fileTypes.some(fileType => fileType.toLowerCase() === value.toLowerCase())
+
+    return {
+        ...formData,
+        finalDeliverable: '',
+        metadata: isDuplicate ? formData.metadata : setMetadataValue(
+            formData.metadata,
+            FILE_TYPES_METADATA_NAME,
+            JSON.stringify([...fileTypes, value]),
+        ),
+    }
+}
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md b/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
index 7ce237844..e0a58d3ad 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
@@ -92,7 +92,7 @@ The form uses `challengeBasicInfoSchema` from `src/apps/work/src/lib/schemas/cha
 - `ReviewersField`: hidden for `Task` and `Marathon Match` challenges because manual reviewer assignment is handled elsewhere. The simplified Design Challenge review section fetches defaults for the selected timeline template, resolves the API's phase-name-only defaults against the challenge phases, then repairs missing, duplicate, and stale hidden reviewer rows while exposing the Screening and Checkpoint Screening member selectors. Checkpoint Review, Review, and Approval are private and automatically assigned to the selected copilot during save; Design Challenge creation and saving highlight the Copilot field when no copilot is selected. On the full human-review tab, each manual reviewer card keeps the legacy review-type dropdown, backfills missing legacy review-type values from the matching default reviewer or iterative-review phase fallback, and each manual reviewer phase selector hides registration/submission phases and any phase already assigned on another manual reviewer card while preserving the card's current selection. When default reviewer metadata is missing, stale, or already covered by existing rows, `Add reviewer` starts from the next unassigned selectable reviewer phase, preferring review phases before approval or screening phases, so single-round Design schedules add the Approver row instead of a registration/submission or duplicate reviewer row. Manual reviewer counts are capped before rendering member assignment controls so closed public opportunities cannot create an unbounded number of member selectors. The full Design reviewer editor keeps the public review opportunity checkbox disabled and unchecked. Screening and Checkpoint Screening member selectors remain available but are optional so a copilot can assign the Screener or Checkpoint Screener after launch. For Design `Challenge` challenges the advanced view also drops the required marker from the Checkpoint Review, Review, and Approval member selectors, because those private phases are assigned to the selected copilot during save.
 - `Submission Settings`: shown for Design `Challenge` and Design `First2Finish` types, and contains the final-deliverables, stock-art, and submission-limit compatibility fields.
 - `RegisteredMemberDownloadField`: shown in Advanced Options for every created challenge type. The radio group persists `allowAllRegistrantsToDownloadWinningSubmissions` as the exact string `true` for all challenge registrants or `false` for passing submitters only. New Development challenges default to passing submitters; other new challenges, including Design, default to all registrants. Existing challenges without the metadata retain passing-submitter-only access.
-- `FinalDeliverablesField`: design-challenge file-type editor that persists the legacy `fileTypes` metadata payload used on challenge draft pages.
+- `FinalDeliverablesField`: design-challenge file-type editor that persists the legacy `fileTypes` metadata payload used on challenge draft pages. Add File Type and Enter append a trimmed, unique file type. The pending input also belongs to the form: create, draft save, autosave, and launch include it in metadata without requiring an Add click, and a successful manual save restores the saved list with an empty input.
 - `MaximumSubmissionsField`: submission-limit editor with `Unlimited` (the default) and `Limited` modes. Limited mode reveals a numeric count field, and both modes persist the legacy `submissionLimit` JSON metadata contract consumed by challenge and review applications. The selection and count are display-only fields, so they are re-seeded from the persisted metadata on every render; that keeps the saved limit visible after the challenge loads and after a draft save resets the form. Existing limited values are restored without being overwritten, including when a draft-save response omits submission-limit metadata, while missing or malformed metadata is normalized to unlimited after initial resource hydration so copilot restoration completes before autosave/manual-save treats the default as a user change. Once the challenge has at least one contest or checkpoint submission the mode and count become read-only, because review scorecards are created from the limit that applied when members submitted. Limited mode requires a count of at least 1: the challenge editor schema validates the persisted `submissionLimit` metadata and reports a missing count on the visible `Limit count` field, so saving, autosaving, and launching are blocked until the count is entered. The rule is skipped when the limit is not configurable, which keeps non-Design challenges and challenges that already have submissions saveable.
 - `ChallengeDescriptionField`: public markdown spec editor with a `Copy spec` action that copies
   the current Markdown in both edit and read-only view modes.
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.tsx b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.tsx
index f5811fd10..fb011c8c7 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.tsx
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.tsx
@@ -92,6 +92,7 @@ import {
     getMetadataValue,
     setMetadataValue,
 } from '../../../../lib/utils/metadata.utils'
+import { commitPendingFinalDeliverable } from '../../../../lib/utils/final-deliverables.utils'
 import { isReviewerAssignmentOptional } from '../../../../lib/utils/reviewer.utils'
 import {
     getProjectBillingAccountChallengeErrorMessage,
@@ -3359,7 +3360,7 @@ export const ChallengeEditorForm: FC<ChallengeEditorFormProps> = (
             setSaveValidationError(undefined)
 
             try {
-                const formData = getValues()
+                const formData = commitPendingFinalDeliverable(getValues())
                 const resolvedProjectBillingAccount = await resolveProjectBillingAccount()
                 const selectedRoundType = getCreateRoundType(formData.roundType, formElementRef.current)
                 const createProjectId = resolveRequiredCreateProjectId(formData.projectId, fallbackProjectId)
@@ -3653,7 +3654,7 @@ export const ChallengeEditorForm: FC<ChallengeEditorFormProps> = (
                 }
 
                 const formDataWithProjectBilling = applyProjectBillingToChallengeFormData(
-                    formDataToSave,
+                    commitPendingFinalDeliverable(formDataToSave),
                     resolvedProjectBillingAccount,
                 )
                 const payload = transformFormDataToChallenge({
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.spec.tsx b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.spec.tsx
index b40f90258..52ecd4951 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.spec.tsx
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.spec.tsx
@@ -5,6 +5,7 @@ import {
 } from 'react'
 import {
     render,
+    RenderResult,
     screen,
 } from '@testing-library/react'
 import '@testing-library/jest-dom'
@@ -16,6 +17,7 @@ import {
 } from 'react-hook-form'
 
 import { ChallengeEditorFormData } from '../../../../../lib/models'
+import { commitPendingFinalDeliverable } from '../../../../../lib/utils/final-deliverables.utils'
 
 import { FinalDeliverablesField } from './FinalDeliverablesField'
 
@@ -51,6 +53,7 @@ interface TestHarnessProps {
         name: string
         value: unknown
     }>
+    onSave?: (formData: ChallengeEditorFormData) => void
 }
 
 const MetadataWatcher: FC = () => {
@@ -74,15 +77,53 @@ const TestHarness: FC<TestHarnessProps> = (props: TestHarnessProps) => {
         },
     })
 
+    /** Submits the editor values using the create/save metadata normalization. */
+    function handleSave(): void {
+        props.onSave?.(commitPendingFinalDeliverable(formMethods.getValues()))
+    }
+
     return (
         <FormProvider {...formMethods}>
             <FinalDeliverablesField />
             <MetadataWatcher />
+            {props.onSave && (
+                <button onClick={handleSave} type='button'>
+                    Save challenge
+                </button>
+            )}
         </FormProvider>
     )
 }
 
 describe('FinalDeliverablesField', () => {
+    it('saves a pending file type when Save is clicked and restores it from saved metadata', async () => {
+        const user = userEvent.setup()
+        const onSave = jest.fn()
+        const { unmount }: RenderResult = render(
+            <TestHarness
+                defaultMetadata={[{ name: 'allowStockArt', value: 'true' }]}
+                onSave={onSave}
+            />,
+        )
+
+        await user.type(screen.getByRole('textbox'), '  PNG  ')
+        await user.click(screen.getByRole('button', { name: 'Save challenge' }))
+
+        expect(onSave)
+            .toHaveBeenCalledWith(expect.objectContaining({
+                metadata: [
+                    { name: 'allowStockArt', value: 'true' },
+                    { name: 'fileTypes', value: '["PNG"]' },
+                ],
+            }))
+        unmount()
+        render(<TestHarness defaultMetadata={onSave.mock.calls[0][0].metadata} />)
+        expect(screen.getByText('PNG'))
+            .toBeInTheDocument()
+        expect(screen.getByRole('textbox'))
+            .toHaveValue('')
+    })
+
     it('adds unique file types to the saved metadata payload', async () => {
         const user = userEvent.setup()
 
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.tsx b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.tsx
index 28f482791..5289905a3 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.tsx
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/components/FinalDeliverablesField/FinalDeliverablesField.tsx
@@ -5,7 +5,6 @@ import {
     MouseEvent,
     useCallback,
     useMemo,
-    useState,
 } from 'react'
 import {
     useFormContext,
@@ -23,75 +22,21 @@ import {
     getMetadataValue,
     setMetadataValue,
 } from '../../../../../lib/utils/metadata.utils'
+import {
+    FILE_TYPES_METADATA_NAME,
+    normalizeFileTypeValue,
+    parseFileTypesMetadata,
+} from '../../../../../lib/utils/final-deliverables.utils'
 
 import styles from './FinalDeliverablesField.module.scss'
 
-const FILE_TYPES_METADATA_NAME = 'fileTypes'
-
-/**
- * Normalizes a single final-deliverable label coming from either user input or saved metadata.
- *
- * @param value raw file-type value from the input or metadata payload.
- * @returns the trimmed file-type label, or `undefined` when the value is empty.
- */
-function normalizeFileTypeValue(value: unknown): string | undefined {
-    if (typeof value !== 'string') {
-        return undefined
-    }
-
-    const normalizedValue = value.trim()
-
-    return normalizedValue || undefined
-}
-
-/**
- * Parses the persisted `fileTypes` challenge metadata into a unique, display-ready list.
- *
- * @param value serialized challenge metadata entry for final deliverables.
- * @returns normalized file-type labels in the saved order, excluding empty or duplicate values.
- */
-function parseFileTypesMetadata(value: string | undefined): string[] {
-    if (!value) {
-        return []
-    }
-
-    try {
-        const parsedValue = JSON.parse(value) as unknown
-
-        if (!Array.isArray(parsedValue)) {
-            return []
-        }
-
-        const addedFileTypes = new Set<string>()
-
-        return parsedValue
-            .map(item => normalizeFileTypeValue(item))
-            .filter((item): item is string => {
-                if (!item) {
-                    return false
-                }
-
-                const normalizedKey = item.toLowerCase()
-
-                if (addedFileTypes.has(normalizedKey)) {
-                    return false
-                }
-
-                addedFileTypes.add(normalizedKey)
-
-                return true
-            })
-    } catch {
-        return []
-    }
-}
-
 /**
  * Edits the design challenge final-deliverables metadata stored under `fileTypes`.
  *
  * The field mirrors the legacy work-manager behavior used on design challenge drafts:
  * users can add or remove deliverable file types, and the component persists them as the
- * JSON-serialized `fileTypes` metadata entry on the challenge form.
+ * JSON-serialized `fileTypes` metadata entry on the challenge form. The pending input
+ * also belongs to the form so create and save actions can include it without an Add click.
  *
  * @returns the final-deliverables editor UI.
  */
@@ -102,7 +47,10 @@ export const FinalDeliverablesField: FC = () => {
         control: dynamicFormControl,
         name: 'metadata',
     }) as ChallengeMetadata[] | undefined
-    const [newFileType, setNewFileType] = useState<string>('')
+    const newFileType = useWatch({
+        control: dynamicFormControl,
+        name: 'finalDeliverable',
+    }) as string | undefined
 
     const fileTypes = useMemo(
         () => parseFileTypesMetadata(getMetadataValue(metadata, FILE_TYPES_METADATA_NAME)),
@@ -129,8 +77,8 @@ export const FinalDeliverablesField: FC = () => {
     }, [formContext, metadata])
 
     const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
-        setNewFileType(event.target.value)
-    }, [])
+        formContext.setValue('finalDeliverable', event.target.value, { shouldDirty: true })
+    }, [formContext])
 
     const handleAddFileType = useCallback((): void => {
         if (!normalizedNewFileType || isDuplicateValue) {
@@ -141,9 +89,10 @@ export const FinalDeliverablesField: FC = () => {
             ...fileTypes,
             normalizedNewFileType,
         ])
-        setNewFileType('')
+        formContext.setValue('finalDeliverable', '', { shouldDirty: true })
     }, [
         fileTypes,
+        formContext,
         isDuplicateValue,
         normalizedNewFileType,
         updateFileTypes,
@@ -213,7 +162,7 @@ export const FinalDeliverablesField: FC = () => {
                     onKeyDown={handleInputKeyDown}
                     placeholder='Add final deliverable file type'
                     type='text'
-                    value={newFileType}
+                    value={newFileType || ''}
                 />
                 <Button
                     disabled={!normalizedNewFileType || isDuplicateValue}

From 08ccf5eddcd3c9a76af35d1fa2d12738a7cbb948 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Tue, 15 Sep 2026 13:56:28 +1000
Subject: [PATCH 05/22] fix(PM-6311): combine Marathon test progress and status

---
 src/apps/opportunities/README.md              |  6 +++
 .../pages/ChallengeDetailsPage.flows.spec.tsx | 11 ++--
 .../pages/ChallengeDetailsPage.module.scss    | 18 ++++---
 .../src/pages/ChallengeDetailsPage.tsx        | 53 ++++++++++++-------
 4 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/src/apps/opportunities/README.md b/src/apps/opportunities/README.md
index 1dfa05d2e..cf824fab0 100644
--- a/src/apps/opportunities/README.md
+++ b/src/apps/opportunities/README.md
@@ -424,6 +424,12 @@ submission history, and Marathon Match dashboard tooltips and accessible data.
 Thousands separators, valid zero, and negative scorer sentinels retain their
 established handling. Compact My Submissions columns preserve those
 full-precision values without overlapping adjacent score or action columns.
+Marathon My Submissions combines Test Progress and Test Status into one Test
+Status column. Running tests show the available progress bar and percentage;
+Passed, Failed, and Cancelled attempts show their terminal badge instead. If
+progress is unavailable, the status label or an em dash remains visible. The
+seven-column table fits the padded desktop card; narrower tablets retain
+horizontal scrolling and mobile uses the existing record cards.
 The Figma keeps separate Provisional Score and Final Score columns and uses
 `-` when a final value is not yet available. Winners use Review API's canonical
 `GET /v6/projectResult` member-and-placement result instead of inferring a
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
index c970c97cf..e20a4b775 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.flows.spec.tsx
@@ -1920,7 +1920,6 @@ describe('ChallengeDetailsPage member flows', () => {
         const headers = [
             'Current Test Process',
             'Test Status',
-            'Test Progress',
             'Final Score',
             'Provisional Score',
         ]
@@ -1928,8 +1927,10 @@ describe('ChallengeDetailsPage member flows', () => {
             .toBeInTheDocument())
         expect(screen.getByText('System'))
             .toBeInTheDocument()
-        expect(screen.getByText('In progress'))
-            .toBeInTheDocument()
+        expect(screen.queryByRole('columnheader', { name: 'Test Progress' }))
+            .not.toBeInTheDocument()
+        expect(screen.getByRole('progressbar', { name: 'Test progress for submission submission-1' }))
+            .toHaveAttribute('aria-valuenow', '50')
         expect(screen.getByText('50%'))
             .toBeInTheDocument()
         const finalScore = screen.getByRole('cell', { name: '99.31399426811394' })
@@ -1988,6 +1989,8 @@ describe('ChallengeDetailsPage member flows', () => {
         fireEvent.click(screen.getByRole('tab', { name: 'My Submissions' }))
         expect(screen.getByText('Cancelled'))
             .toHaveClass('testStatusCancelled')
+        expect(screen.queryByRole('progressbar'))
+            .not.toBeInTheDocument()
         expect(screen.queryByText('Failed'))
             .not.toBeInTheDocument()
         expect(screen.queryByRole('cell', { name: '-1' }))
@@ -2002,7 +2005,7 @@ describe('ChallengeDetailsPage member flows', () => {
         expect(challengeDetailStyles)
             .toMatch(/\.myMarathonTable\s*\{[\s\S]*?th,\s*td\s*\{\s*padding-inline: 8px;/)
         expect(challengeDetailStyles)
-            .toMatch(/\.myMarathonTableCard\s*\{[\s\S]*?\.myMarathonTable\s*\{\s*min-width: 1200px;/)
+            .toMatch(/\.myMarathonTableCard\s*\{[\s\S]*?\.myMarathonTable\s*\{\s*min-width: 1040px;/)
         expect(challengeDetailStyles)
             .not.toContain('min-width: 1280px;')
     })
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss b/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
index d81af22c2..a124d36b6 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.module.scss
@@ -437,11 +437,10 @@
     th:first-child { width: 120px; }
     th:nth-child(2) { width: 190px; }
     th:nth-child(3) { width: 150px; }
-    th:nth-child(4) { width: 105px; }
-    th:nth-child(5) { width: 140px; }
-    th:nth-child(6),
-    th:nth-child(7) { width: 150px; }
-    th:nth-child(8) { width: 120px; }
+    th:nth-child(4) { width: 140px; }
+    th:nth-child(5),
+    th:nth-child(6) { width: 160px; }
+    th:nth-child(7) { width: 120px; }
 
     th:nth-child(2),
     td:nth-child(2) {
@@ -463,7 +462,7 @@
     overflow-x: auto;
 
     .myMarathonTable {
-        min-width: 1200px;
+        min-width: 1040px;
     }
 }
 
@@ -480,9 +479,16 @@
 }
 
 .testStatus {
+    align-items: center;
     border-radius: 4px;
     display: inline-flex;
+    gap: 4px;
     padding: 2px 4px;
+
+    svg {
+        height: 16px;
+        width: 16px;
+    }
 }
 
 .testStatusInprogress {
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
index 71bbf0040..9d13b4c0f 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
@@ -1585,7 +1585,6 @@ const SubmissionsTab: FC<SubmissionsTabProps> = props => {
                                     <>
                                         <th>Current Test Process</th>
                                         <th>Test Status</th>
-                                        <th>Test Progress</th>
                                         <th className={styles.scoreColumn}>Final Score</th>
                                         <th className={styles.scoreColumn}>Provisional Score</th>
                                     </>
@@ -1633,23 +1632,41 @@ const SubmissionsTab: FC<SubmissionsTabProps> = props => {
                                                         {progress.process ?? '—'}
                                                     </td>
                                                     <td data-mobile-label='Test Status'>
-                                                        <span
-                                                            className={`${styles.testStatus} ${statusClass}`}
-                                                        >
-                                                            {progress.status ?? '—'}
-                                                        </span>
-                                                    </td>
-                                                    <td data-mobile-label='Test Progress'>
-                                                        <div className={styles.testProgress}>
-                                                            <span className={styles.progressTrack}>
-                                                                <span style={{ width: `${progress.progress ?? 0}%` }} />
-                                                            </span>
-                                                            <span>
-                                                                {progress.progress === undefined
-                                                                    ? '—'
-                                                                    : `${Math.round(progress.progress)}%`}
-                                                            </span>
-                                                        </div>
+                                                        {(!progress.status || progress.status === 'In progress')
+                                                            && progress.progress !== undefined ? (
+                                                                <div
+                                                                    aria-label={
+                                                                        `Test progress for submission ${submission.id}`
+                                                                    }
+                                                                    aria-valuemax={100}
+                                                                    aria-valuemin={0}
+                                                                    aria-valuenow={Math.round(progress.progress)}
+                                                                    className={styles.testProgress}
+                                                                    role='progressbar'
+                                                                >
+                                                                    <span
+                                                                        aria-hidden='true'
+                                                                        className={styles.progressTrack}
+                                                                    >
+                                                                        <span
+                                                                            style={{ width: `${progress.progress}%` }}
+                                                                        />
+                                                                    </span>
+                                                                    <span>{`${Math.round(progress.progress)}%`}</span>
+                                                                </div>
+                                                            ) : (
+                                                                <span className={`${styles.testStatus} ${statusClass}`}>
+                                                                    {progress.status === 'Passed' && (
+                                                                        <IconOutline.CheckIcon aria-hidden='true' />
+                                                                    )}
+                                                                    {progress.status === 'Failed' && (
+                                                                        <IconOutline.MinusCircleIcon
+                                                                            aria-hidden='true'
+                                                                        />
+                                                                    )}
+                                                                    {progress.status ?? '—'}
+                                                                </span>
+                                                            )}
                                                     </td>
                                                     <td
                                                         className={styles.scoreColumn}

From bf7752ceb57e2353b90dc36f7568f000710753e3 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Tue, 15 Sep 2026 22:11:59 +0300
Subject: [PATCH 06/22] PM-6346 - fix type for challenge

---
 src/apps/admin/src/ai/topscout-rag/ingest-options.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/admin/src/ai/topscout-rag/ingest-options.ts b/src/apps/admin/src/ai/topscout-rag/ingest-options.ts
index 121157100..c68bc4c55 100644
--- a/src/apps/admin/src/ai/topscout-rag/ingest-options.ts
+++ b/src/apps/admin/src/ai/topscout-rag/ingest-options.ts
@@ -34,7 +34,7 @@ export const BULK_TRACK_OPTIONS: InputSelectOption[] = [
  */
 export const BULK_TYPE_OPTIONS: InputSelectOption[] = [
     { label: 'Any type', value: '' },
-    { label: 'Challenge', value: 'Challenge' },
+    { label: 'Challenge', value: 'CH' },
     { label: 'First2Finish', value: 'F2F' },
     { label: 'Marathon Match', value: 'MM' },
     { label: 'Task', value: 'TSK' },

From d34b61e6e784d685b69e89edaa413fd3824bd4b1 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 16 Sep 2026 06:04:49 +1000
Subject: [PATCH 07/22] PM-6329 Expand Work showcase forms and add WIN sharing

---
 docs/work-showcase-win.md                     |  49 +++++
 .../ShowcasePostPreview.tsx                   |  43 ++++-
 .../form/FormSelectField/FormSelectField.tsx  |   8 +-
 .../components/form/ProjectMetadataFields.tsx |  59 ++++++
 .../src/lib/constants/showcase.constants.ts   |  10 +
 src/apps/work/src/lib/models/Project.model.ts |   9 +-
 .../lib/models/ProjectShowcasePost.model.ts   |  15 +-
 src/apps/work/src/lib/models/index.ts         |   1 +
 .../src/lib/schemas/project-editor.schema.ts  |  13 +-
 .../lib/schemas/project-metadata.schema.ts    |  48 +++++
 .../lib/schemas/showcase-post.schema.spec.ts  |  32 ++++
 .../src/lib/schemas/showcase-post.schema.ts   |  32 ++++
 .../project-showcase-posts.service.ts         |  80 ++++----
 .../ProjectEditorForm.spec.tsx                |  43 ++++-
 .../ProjectEditorForm/ProjectEditorForm.tsx   |  28 +++
 .../ProjectShowcasePage.spec.tsx              | 174 ++++++++++++++++++
 .../ProjectShowcasePage.tsx                   | 174 ++++++++++++++----
 17 files changed, 731 insertions(+), 87 deletions(-)
 create mode 100644 docs/work-showcase-win.md
 create mode 100644 src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
 create mode 100644 src/apps/work/src/lib/constants/showcase.constants.ts
 create mode 100644 src/apps/work/src/lib/schemas/project-metadata.schema.ts
 create mode 100644 src/apps/work/src/lib/schemas/showcase-post.schema.spec.ts
 create mode 100644 src/apps/work/src/lib/schemas/showcase-post.schema.ts
 create mode 100644 src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx

diff --git a/docs/work-showcase-win.md b/docs/work-showcase-win.md
new file mode 100644
index 000000000..964be2ed1
--- /dev/null
+++ b/docs/work-showcase-win.md
@@ -0,0 +1,49 @@
+# Work showcase and WIN (PM-6329)
+
+The project editor and showcase form share `project.details.customer`, `smu`,
+`smuOther`, and `dealCloseDate`. New showcases start with the current project
+values. Existing showcases load those values from the post API response. Saving
+a showcase updates its content and these project fields in one projects API
+transaction, then refreshes the cached project.
+
+Project metadata is optional in the project editor and required when saving the
+showcase form. SMU accepts APMEA, Europe, Americas1, Americas2, or Others. Others
+requires a custom value; selecting a standard SMU clears the stored custom value.
+Deal Close Date is a `YYYY-MM-DD` calendar date and is not converted between timezones.
+
+The showcase form follows this order:
+
+1. Title
+2. Type (required: Open Innovation, Private POD Delivery, Flexi-Talent Supply, AI Data Licensing)
+3. Customer / SMU / Deal Close Date
+4. Industry/Sector
+5. Category/Technology
+6. The Challenge
+7. The Solution (the existing `content` API field)
+8. Business Impact Realised
+9. Key Win
+10. Post Media
+11. Topcoder Challenge Launched
+12. Current Status (Delivered, In Delivery, On-Hold, Planned)
+13. Owner (a name or handle)
+
+The Challenge, The Solution and Business Impact Realised use the same Markdown
+editor and sanitized rich-text preview. Key Win and Owner are single-line strings
+of up to 255 characters. Existing title, taxonomy and solution requirements remain.
+
+**Send to WIN** is unchecked for new posts and retains the saved choice on edits.
+Saving with the checkbox selected makes the record available to authorized callers
+of `GET /v6/reports/WIN`. This is a pull integration: the success message confirms
+availability to WIN. Validation and API failures keep the form open with an error.
+Unchecking removes the post from the WIN report after saving. Archived posts and
+posts belonging to deleted projects are excluded from the report.
+
+## Deployment and verification
+
+Deploy the PM-6329 projects API migration and application before enabling this UI;
+deploy the reports API change for WIN callers. No new UI environment variables are needed.
+
+Use `.nvmrc`, then `yarn lint`, `yarn run build`, and the tests for
+`ProjectShowcasePage`, `ProjectEditorForm`, `project-editor.schema`, and
+`showcase-post.schema`. Manually check that editing metadata in either form is
+reflected when reopening the other form, and that opting in/out changes the WIN report.
diff --git a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
index d20c1e18e..aa62cb286 100644
--- a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
+++ b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
@@ -5,6 +5,8 @@ import { IconOutline } from '~/libs/ui'
 import { renderRichTextToHtml } from '~/libs/shared/lib/utils/rich-text'
 import { textFormatDateLocaleShortString } from '~/libs/shared/lib/utils/text-format'
 
+import { ShowcaseMetadata } from '../../models/ProjectShowcasePost.model'
+
 import styles from './ShowcasePostPreview.module.scss'
 
 export interface ShowcasePostPreviewChallenge {
@@ -16,7 +18,7 @@ export interface ShowcasePostPreviewChallenge {
     numOfRegistrants?: number
 }
 
-export interface ShowcasePostPreviewData {
+export interface ShowcasePostPreviewData extends ShowcaseMetadata {
     title: string
     content: string
     categories: Array<{ id: string; name: string }>
@@ -99,12 +101,37 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
 
             <div className={styles.bodyWrap}>
                 <div className={styles.body}>
-                    <div
-                        className={styles.htmlContent}
-                        dangerouslySetInnerHTML={{
-                            __html: renderRichTextToHtml(data.content || ''),
-                        }}
-                    />
+                    <dl>
+                        {[
+                            ['Type', data.type],
+                            ['Customer', data.customer],
+                            ['SMU', data.smu === 'Others' ? data.smuOther : data.smu],
+                            ['Deal Close Date', data.dealCloseDate],
+                            ['Key Win', data.keyWin],
+                            ['Current Status', data.currentStatus],
+                            ['Owner', data.owner],
+                        ].filter(([, value]) => !!value)
+                            .map(([label, value]) => (
+                                <div key={label} className={styles.subTitleItem}>
+                                    <dt>{label}</dt>
+                                    <dd>{value}</dd>
+                                </div>
+                            ))}
+                    </dl>
+                    {[
+                        ['The Challenge', data.challenge],
+                        ['The Solution', data.content],
+                        ['Business Impact Realised', data.businessImpact],
+                    ].filter(([, value]) => !!value)
+                        .map(([label, value]) => (
+                            <section key={label} className={styles.section}>
+                                <h5 className={styles.sectionTitle}>{label}</h5>
+                                <div
+                                    className={styles.htmlContent}
+                                    dangerouslySetInnerHTML={{ __html: renderRichTextToHtml(value || '') }}
+                                />
+                            </section>
+                        ))}
 
                     <section className={styles.section}>
                         <h5 className={styles.sectionTitle}>Media assets</h5>
@@ -155,7 +182,7 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
                     </section>
 
                     <section className={styles.section}>
-                        <h5 className={styles.sectionTitle}>Challenges</h5>
+                        <h5 className={styles.sectionTitle}>Topcoder Challenge Launched</h5>
                         {data.challenges.length > 0 ? (
                             <ul className={styles.challengeList}>
                                 {data.challenges.map(challenge => {
diff --git a/src/apps/work/src/lib/components/form/FormSelectField/FormSelectField.tsx b/src/apps/work/src/lib/components/form/FormSelectField/FormSelectField.tsx
index cd71a5e41..b50db572f 100644
--- a/src/apps/work/src/lib/components/form/FormSelectField/FormSelectField.tsx
+++ b/src/apps/work/src/lib/components/form/FormSelectField/FormSelectField.tsx
@@ -139,6 +139,12 @@ function getSelectComponent(
     return Select
 }
 
+/**
+ * Renders a form select with its visible label bound to the focusable input.
+ * @param props Field name, label, choices, and optional async/multiple-value behavior.
+ * @returns A React Select control connected to the surrounding form.
+ * @throws Requires a parent FormProvider; option-loading errors propagate to the loader.
+ */
 export const FormSelectField: FC<FormSelectFieldProps> = (props: FormSelectFieldProps) => {
     const formContext = useFormContext()
     const {
@@ -206,7 +212,7 @@ export const FormSelectField: FC<FormSelectFieldProps> = (props: FormSelectField
                 className={styles.select}
                 classNamePrefix='challenge-select'
                 defaultOptions={isAsync}
-                id={props.name}
+                inputId={props.name}
                 isClearable={props.isClearable}
                 isDisabled={props.disabled}
                 isMulti={isMulti}
diff --git a/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx b/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
new file mode 100644
index 000000000..5b35ea6cc
--- /dev/null
+++ b/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { SMU_VALUES } from '../../constants/showcase.constants'
+
+import { FormSelectField } from './FormSelectField'
+import { FormTextField } from './FormTextField'
+
+interface ProjectMetadataFieldsProps {
+    className?: string
+    required?: boolean
+}
+
+/**
+ * Renders the shared Customer, SMU and Deal Close Date fields in both project forms.
+ * @param props Optional field styling and whether showcase metadata is required.
+ * @returns Fields bound to the surrounding React Hook Form, including custom SMU input.
+ * @throws Requires a parent FormProvider, like the other work form controls.
+ */
+export const ProjectMetadataFields: FC<ProjectMetadataFieldsProps> = props => {
+    const formContext = useFormContext()
+    const smu = formContext.watch('smu')
+
+    return (
+        <>
+            <FormTextField
+                className={props.className}
+                label='Customer'
+                name='customer'
+                maxLength={255}
+                required={props.required}
+            />
+            <FormSelectField
+                className={props.className}
+                label='SMU'
+                name='smu'
+                options={SMU_VALUES.map(value => ({ label: value, value }))}
+                isClearable={!props.required}
+                required={props.required}
+            />
+            {smu === 'Others' && (
+                <FormTextField
+                    className={props.className}
+                    label='Other SMU'
+                    name='smuOther'
+                    maxLength={255}
+                    required
+                />
+            )}
+            <FormTextField
+                className={props.className}
+                label='Deal Close Date'
+                name='dealCloseDate'
+                type='date'
+                required={props.required}
+            />
+        </>
+    )
+}
diff --git a/src/apps/work/src/lib/constants/showcase.constants.ts b/src/apps/work/src/lib/constants/showcase.constants.ts
new file mode 100644
index 000000000..c7f4f98b3
--- /dev/null
+++ b/src/apps/work/src/lib/constants/showcase.constants.ts
@@ -0,0 +1,10 @@
+export const SMU_VALUES = ['APMEA', 'Europe', 'Americas1', 'Americas2', 'Others']
+
+export const SHOWCASE_TYPE_VALUES = [
+    'Open Innovation',
+    'Private POD Delivery',
+    'Flexi-Talent Supply',
+    'AI Data Licensing',
+]
+
+export const SHOWCASE_CURRENT_STATUS_VALUES = ['Delivered', 'In Delivery', 'On-Hold', 'Planned']
diff --git a/src/apps/work/src/lib/models/Project.model.ts b/src/apps/work/src/lib/models/Project.model.ts
index 2ed1d07e5..7e440187a 100644
--- a/src/apps/work/src/lib/models/Project.model.ts
+++ b/src/apps/work/src/lib/models/Project.model.ts
@@ -8,7 +8,14 @@ import { TaasJob } from './TaasJob.model'
 
 export type ProjectStatus = typeof PROJECT_STATUSES[number]['value']
 
-export interface ProjectDetails extends Record<string, unknown> {
+export interface ProjectMetadata {
+    customer?: string
+    smu?: string
+    smuOther?: string
+    dealCloseDate?: string
+}
+
+export interface ProjectDetails extends Record<string, unknown>, ProjectMetadata {
     displayMemberPaymentDetailsToCopilots?: boolean
     taasDefinition?: {
         taasJobs?: TaasJob[]
diff --git a/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
index 9b49cd787..fa4d314fa 100644
--- a/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
+++ b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
@@ -1,6 +1,7 @@
 import { SortOrder } from '../utils/sorting.utils'
 
 import { PaginationModel } from './Pagination.model'
+import { ProjectMetadata } from './Project.model'
 
 export interface ProjectShowcasePostTaxonomyItem {
     id: string
@@ -28,7 +29,17 @@ export interface ProjectShowcasePostChallengeMetadataItem {
     countries: string[]
 }
 
-export interface ProjectShowcasePost {
+export interface ShowcaseMetadata extends ProjectMetadata {
+    type?: string
+    challenge?: string
+    businessImpact?: string
+    keyWin?: string
+    currentStatus?: string
+    owner?: string
+    sendToWin?: boolean
+}
+
+export interface ProjectShowcasePost extends ShowcaseMetadata {
     id: string
     title: string
     content?: string
@@ -38,7 +49,7 @@ export interface ProjectShowcasePost {
     createdAt: string
     createdById: number
     createdByHandle?: string
-    publishedAt?: number
+    publishedAt?: number | string
     publishedBy?: string
     industries: ProjectShowcasePostTaxonomyItem[]
     categories: ProjectShowcasePostTaxonomyItem[]
diff --git a/src/apps/work/src/lib/models/index.ts b/src/apps/work/src/lib/models/index.ts
index cbd7b96dd..c42ac45cb 100644
--- a/src/apps/work/src/lib/models/index.ts
+++ b/src/apps/work/src/lib/models/index.ts
@@ -18,6 +18,7 @@ export type {
     ProjectPhaseProduct,
     Project,
     ProjectDetails,
+    ProjectMetadata,
     ProjectFilters,
     ProjectStatus as ProjectStatusValue,
     ProjectType,
diff --git a/src/apps/work/src/lib/schemas/project-editor.schema.ts b/src/apps/work/src/lib/schemas/project-editor.schema.ts
index dcf9e3a88..cd4cd94a5 100644
--- a/src/apps/work/src/lib/schemas/project-editor.schema.ts
+++ b/src/apps/work/src/lib/schemas/project-editor.schema.ts
@@ -1,8 +1,11 @@
 import * as yup from 'yup'
 
 import { PROJECT_STATUS } from '../constants'
+import { ProjectMetadata } from '../models/Project.model'
 
-export interface ProjectEditorSchemaData {
+import { projectMetadataSchemaFields } from './project-metadata.schema'
+
+export interface ProjectEditorSchemaData extends ProjectMetadata {
     billingAccountId?: string
     name: string
     description: string
@@ -14,12 +17,20 @@ export interface ProjectEditorSchemaData {
     groups?: string[]
 }
 
+/**
+ * Validates project edits and creation, including optional shared showcase metadata.
+ * @param isEdit Whether an existing project is being edited.
+ * @param canManage Whether the user can change project status.
+ * @returns The project form schema; validation rejects invalid or missing required values.
+ * @throws Does not throw when constructing the schema.
+ */
 export function createProjectEditorSchema(
     isEdit: boolean,
     canManage: boolean,
 ): yup.ObjectSchema<ProjectEditorSchemaData> {
     return yup
         .object({
+            ...projectMetadataSchemaFields(false),
             billingAccountId: yup
                 .string()
                 .optional(),
diff --git a/src/apps/work/src/lib/schemas/project-metadata.schema.ts b/src/apps/work/src/lib/schemas/project-metadata.schema.ts
new file mode 100644
index 000000000..1a1167e9a
--- /dev/null
+++ b/src/apps/work/src/lib/schemas/project-metadata.schema.ts
@@ -0,0 +1,48 @@
+import * as yup from 'yup'
+
+import { SMU_VALUES } from '../constants/showcase.constants'
+
+/**
+ * Checks a date-only value without converting its calendar day to a local timezone.
+ * @param value Optional YYYY-MM-DD input from the project or showcase form.
+ * @returns True for empty optional values or an existing calendar date.
+ * @throws Does not throw.
+ */
+function isCalendarDate(value: string | undefined): boolean {
+    if (!value) return true
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false
+    const date = new Date(`${value}T00:00:00.000Z`)
+    return Number.isFinite(date.getTime()) && date.toISOString()
+        .slice(0, 10) === value
+}
+
+/**
+ * Builds shared project metadata validation for the project editor and showcase form.
+ * @param required Whether Customer, SMU and Deal Close Date must be populated.
+ * @returns Yup fields; Other SMU is always required when Others is selected.
+ * @throws Does not throw; Yup reports invalid input when the form is validated.
+ */
+export function projectMetadataSchemaFields(required: boolean): {
+    customer: yup.StringSchema<string | undefined>
+    dealCloseDate: yup.StringSchema<string | undefined>
+    smu: yup.StringSchema<string | undefined>
+    smuOther: yup.StringSchema<string | undefined>
+} {
+    const text = yup.string()
+        .trim()
+        .max(255)
+    const smu = yup.string()
+        .oneOf([...SMU_VALUES, ''])
+    const date = yup.string()
+        .test('calendar-date', 'Enter a valid deal close date', isCalendarDate)
+    return {
+        customer: required ? text.required('Customer is required') : text.optional(),
+        dealCloseDate: required ? date.required('Deal Close Date is required') : date.optional(),
+        smu: required ? smu.required('SMU is required') : smu.optional(),
+        smuOther: text.when('smu', {
+            is: 'Others',
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required('Other SMU is required'),
+        }),
+    }
+}
diff --git a/src/apps/work/src/lib/schemas/showcase-post.schema.spec.ts b/src/apps/work/src/lib/schemas/showcase-post.schema.spec.ts
new file mode 100644
index 000000000..397137259
--- /dev/null
+++ b/src/apps/work/src/lib/schemas/showcase-post.schema.spec.ts
@@ -0,0 +1,32 @@
+import { showcasePostSchema } from './showcase-post.schema'
+
+describe('Showcase metadata validation', () => {
+    const valid = {
+        categoryIds: ['1'],
+        content: 'The solution',
+        customer: 'Customer',
+        dealCloseDate: '2024-02-29',
+        industryIds: ['1'],
+        smu: 'Europe',
+        title: 'Title',
+        type: 'Open Innovation',
+    }
+
+    it('requires showcase metadata and accepts a real leap day', async () => {
+        await expect(showcasePostSchema.isValid(valid)).resolves.toBe(true)
+        for (const field of ['customer', 'dealCloseDate', 'smu', 'type']) {
+            // eslint-disable-next-line no-await-in-loop
+            await expect(showcasePostSchema.isValid({ ...valid, [field]: '' })).resolves.toBe(false)
+        }
+    })
+
+    it('requires the custom SMU only when Others is selected', async () => {
+        await expect(showcasePostSchema.isValid({ ...valid, smu: 'Others' })).resolves.toBe(false)
+        await expect(showcasePostSchema.isValid({ ...valid, smu: 'Others', smuOther: 'Custom' })).resolves.toBe(true)
+    })
+
+    it.each(['2026-02-29', '2026-04-31', 'not a date'])('rejects the invalid calendar date %s', async dealCloseDate => {
+        await expect(showcasePostSchema.isValid({ ...valid, dealCloseDate })).resolves.toBe(false)
+    })
+
+})
diff --git a/src/apps/work/src/lib/schemas/showcase-post.schema.ts b/src/apps/work/src/lib/schemas/showcase-post.schema.ts
new file mode 100644
index 000000000..4f0189f92
--- /dev/null
+++ b/src/apps/work/src/lib/schemas/showcase-post.schema.ts
@@ -0,0 +1,32 @@
+import * as yup from 'yup'
+
+import { SHOWCASE_CURRENT_STATUS_VALUES, SHOWCASE_TYPE_VALUES } from '../constants/showcase.constants'
+
+import { projectMetadataSchemaFields } from './project-metadata.schema'
+
+export const showcasePostSchema = yup.object({
+    ...projectMetadataSchemaFields(true),
+    categoryIds: yup.array()
+        .of(yup.string())
+        .min(1, 'Select at least one category.'),
+    content: yup.string()
+        .trim()
+        .required('The Solution is required.'),
+    currentStatus: yup.string()
+        .oneOf([...SHOWCASE_CURRENT_STATUS_VALUES, '']),
+    industryIds: yup.array()
+        .of(yup.string())
+        .min(1, 'Select at least one industry.'),
+    keyWin: yup.string()
+        .trim()
+        .max(255),
+    owner: yup.string()
+        .trim()
+        .max(255),
+    title: yup.string()
+        .trim()
+        .required('Title is required.'),
+    type: yup.string()
+        .oneOf(SHOWCASE_TYPE_VALUES)
+        .required('Type is required.'),
+})
diff --git a/src/apps/work/src/lib/services/project-showcase-posts.service.ts b/src/apps/work/src/lib/services/project-showcase-posts.service.ts
index 84f5f6c2d..62f825691 100644
--- a/src/apps/work/src/lib/services/project-showcase-posts.service.ts
+++ b/src/apps/work/src/lib/services/project-showcase-posts.service.ts
@@ -18,6 +18,7 @@ import type {
     ProjectShowcasePostIndustry,
     ProjectShowcasePostMedia,
     ProjectShowcasePostTaxonomyItem,
+    ShowcaseMetadata,
 } from '../models'
 
 import { fetchMembersByUserIds } from './members.service'
@@ -102,6 +103,12 @@ function buildProjectShowcasePostsUrl(
     return `${urlBase}?${query.toString()}`
 }
 
+/**
+ * Fetches a paginated showcase list including shared metadata and owner values.
+ * @param params Project, pagination, sorting and taxonomy filters.
+ * @returns Normalized posts and pagination data, enriched with creator handles.
+ * @throws A normalized error when a required API request fails.
+ */
 export async function fetchProjectShowcasePosts(
     params: FetchProjectShowcasePostsParams,
 ): Promise<FetchProjectShowcasePostsResponse> {
@@ -110,38 +117,9 @@ export async function fetchProjectShowcasePosts(
             buildProjectShowcasePostsUrl(params),
         )
 
-        const posts = (response.data || []).map((post: any) => ({
-            categories: Array.isArray(post.categories)
-                ? post.categories.map((category: any) => ({
-                    id: String(category.id),
-                    name: String(category.name || ''),
-                }))
-                : [],
-            content: String(post.content || ''),
-            createdAt: String(post.createdAt || ''),
-            createdByHandle: post.createdByHandle !== undefined && post.createdByHandle !== null
-                ? String(post.createdByHandle)
-                : undefined,
-            createdById: Number(post.createdById || 0),
-            id: String(post.id),
-            industries: Array.isArray(post.industries)
-                ? post.industries.map((industry: any) => ({
-                    id: String(industry.id),
-                    name: String(industry.name || ''),
-                }))
-                : [],
-            media: Array.isArray(post.media)
-                ? post.media.map((mediaItem: any) => ({
-                    id: String(mediaItem.id || ''),
-                    type: String(mediaItem.type || ''),
-                    url: String(mediaItem.url || ''),
-                }))
-                    .filter((item: any) => item.url)
-                : [],
-            projectId: String(post.projectId || ''),
-            status: String(post.status || ''),
-            title: String(post.title || ''),
-        }))
+        const posts = (response.data || [])
+            .map(normalizeProjectShowcasePost)
+            .filter((post: ProjectShowcasePostDetails | undefined): post is ProjectShowcasePostDetails => !!post)
 
         const creatorUserIds: string[] = Array.from(new Set<string>(
             posts
@@ -225,6 +203,12 @@ function normalizeProjectShowcasePostMediaArray(value: unknown): ProjectShowcase
         .filter(item => item.url)
 }
 
+/**
+ * Normalizes API post data and the shared project metadata for forms and previews.
+ * @param value Raw projects API response.
+ * @returns A showcase post or undefined when the response is not an object.
+ * @throws Does not throw for valid JSON responses.
+ */
 function normalizeProjectShowcasePost(value: unknown): ProjectShowcasePostDetails | undefined {
     if (typeof value !== 'object' || value === null) {
         return undefined
@@ -233,7 +217,9 @@ function normalizeProjectShowcasePost(value: unknown): ProjectShowcasePostDetail
     const post = value as Record<string, unknown>
 
     return {
+        businessImpact: normalizeStringOrUndefined(post.businessImpact),
         categories: normalizeTaxonomyArray(post.categories),
+        challenge: normalizeStringOrUndefined(post.challenge),
         challengeIds: Array.isArray(post.challengeIds)
             ? post.challengeIds.map((item: any) => String(item))
             : [],
@@ -242,13 +228,24 @@ function normalizeProjectShowcasePost(value: unknown): ProjectShowcasePostDetail
         createdAt: normalizeString(post.createdAt),
         createdByHandle: normalizeStringOrUndefined(post.createdByHandle),
         createdById: Number(post.createdById || 0),
+        currentStatus: normalizeStringOrUndefined(post.currentStatus),
+        customer: normalizeStringOrUndefined(post.customer),
+        dealCloseDate: normalizeStringOrUndefined(post.dealCloseDate),
         id: normalizeString(post.id),
         industries: normalizeTaxonomyArray(post.industries),
+        keyWin: normalizeStringOrUndefined(post.keyWin),
         media: normalizeProjectShowcasePostMediaArray(post.media),
+        owner: normalizeStringOrUndefined(post.owner),
         projectId: normalizeStringOrUndefined(post.projectId),
         projectTitle: String(post.projectTitle || ''),
+        publishedAt: normalizeStringOrUndefined(post.publishedAt),
+        publishedBy: normalizeStringOrUndefined(post.publishedBy),
+        sendToWin: post.sendToWin === true,
+        smu: normalizeStringOrUndefined(post.smu),
+        smuOther: normalizeStringOrUndefined(post.smuOther),
         status: normalizeString(post.status),
         title: normalizeString(post.title),
+        type: normalizeStringOrUndefined(post.type),
     }
 }
 
@@ -272,9 +269,16 @@ export async function fetchProjectShowcasePost(
     }
 }
 
+/**
+ * Creates a showcase and saves its shared project metadata atomically.
+ * @param projectId Project owning the showcase post.
+ * @param payload Showcase fields, project metadata, and WIN opt-in.
+ * @returns The saved showcase post.
+ * @throws A normalized API error when validation or saving fails.
+ */
 export async function createProjectShowcasePost(
     projectId: string,
-    payload: {
+    payload: ShowcaseMetadata & {
         title: string
         content: string
         industryIds: string[]
@@ -300,10 +304,18 @@ export async function createProjectShowcasePost(
     }
 }
 
+/**
+ * Updates supplied post fields and shared project metadata; omitted fields stay unchanged.
+ * @param projectId Project owning the showcase post.
+ * @param postId Showcase post to update.
+ * @param payload Showcase fields, project metadata, and WIN opt-in.
+ * @returns The saved showcase post.
+ * @throws A normalized API error when validation or saving fails.
+ */
 export async function updateProjectShowcasePost(
     projectId: string,
     postId: string,
-    payload: {
+    payload: ShowcaseMetadata & {
         title?: string
         content?: string
         industryIds?: string[]
diff --git a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
index c2b6a0d91..c628a8458 100644
--- a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
+++ b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
@@ -241,9 +241,9 @@ describe('ProjectEditorForm', () => {
 
         await waitFor(() => expect(mockedCreateProject)
             .toHaveBeenCalledWith(expect.objectContaining({
-                details: {
+                details: expect.objectContaining({
                     displayMemberPaymentDetailsToCopilots: true,
-                },
+                }),
             })))
     })
 
@@ -285,4 +285,43 @@ describe('ProjectEditorForm', () => {
         expect(mockedUpdateProject.mock.calls[0]?.[1].billingAccountId)
             .toBeNull()
     })
+    it('prefills shared metadata and saves changes while retaining other project details', async () => {
+        render(
+            <MemoryRouter>
+                <ProjectEditorForm
+                    canManage
+                    isEdit
+                    projectDetail={{
+                        description: 'Description',
+                        details: {
+                            customer: 'Customer',
+                            dealCloseDate: '2026-09-16',
+                            retained: true,
+                            smu: 'Others',
+                            smuOther: 'Custom',
+                        },
+                        id: 'project-1',
+                        name: 'Project',
+                        status: 'active',
+                    }}
+                    projectTypes={[]}
+                />
+            </MemoryRouter>,
+        )
+        expect((screen.getByLabelText(/^Other SMU/) as HTMLInputElement).value)
+            .toBe('Custom')
+        fireEvent.change(screen.getByLabelText('Customer'), { target: { value: 'Updated' } })
+        fireEvent.keyDown(screen.getByLabelText('SMU'), { code: 'ArrowDown', key: 'ArrowDown' })
+        fireEvent.click(screen.getByText('Europe'))
+        expect(screen.queryByLabelText(/^Other SMU/))
+            .toBeNull()
+        fireEvent.click(screen.getByRole('button', { name: 'Save project' }))
+        await waitFor(() => expect(mockedUpdateProject)
+            .toHaveBeenCalledWith('project-1', expect.objectContaining({
+                details: expect.objectContaining({
+                    customer: 'Updated', dealCloseDate: '2026-09-16', retained: true, smu: 'Europe', smuOther: '',
+                }),
+            })))
+    })
+
 })
diff --git a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
index 339c132db..283fca6df 100644
--- a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
+++ b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
@@ -51,6 +51,7 @@ import {
     showErrorToast,
     showSuccessToast,
 } from '../../../../../lib/utils'
+import { ProjectMetadataFields } from '../../../../../lib/components/form/ProjectMetadataFields'
 
 import styles from './ProjectEditorForm.module.scss'
 
@@ -64,6 +65,10 @@ interface ProjectEditorFormProps {
 }
 
 interface ProjectEditorFormValues {
+    customer: string
+    smu: string
+    smuOther: string
+    dealCloseDate: string
     billingAccountId: string
     cancelReason: string
     description: string
@@ -83,6 +88,13 @@ interface CurrentBillingAccountDetails {
     status: string
 }
 
+/**
+ * Initializes project fields from the project record, including shared showcase metadata.
+ * @param isEdit Whether the form edits an existing project.
+ * @param projectDetail The loaded project, when editing.
+ * @returns Complete form values with empty defaults for optional metadata.
+ * @throws Does not throw.
+ */
 function getDefaultFormValues(
     isEdit: boolean,
     projectDetail?: Project,
@@ -96,12 +108,16 @@ function getDefaultFormValues(
     return {
         billingAccountId,
         cancelReason: projectDetail?.cancelReason || '',
+        customer: projectDetail?.details?.customer || '',
+        dealCloseDate: projectDetail?.details?.dealCloseDate || '',
         description: projectDetail?.description || '',
         displayMemberPaymentDetailsToCopilots: isEdit
             ? projectDetail?.details?.displayMemberPaymentDetailsToCopilots === true
             : true,
         groups,
         name: projectDetail?.name || '',
+        smu: projectDetail?.details?.smu || '',
+        smuOther: projectDetail?.details?.smuOther || '',
         status: isEdit
             ? (projectDetail?.status || PROJECT_STATUS.DRAFT)
             : PROJECT_STATUS.DRAFT,
@@ -363,12 +379,19 @@ export const ProjectEditorForm: FC<ProjectEditorFormProps> = (props: ProjectEdit
                     ? [termsValue]
                     : undefined
                 const groups = normalizeStringList(formData.groups)
+                const projectMetadata = {
+                    customer: formData.customer.trim(),
+                    dealCloseDate: formData.dealCloseDate,
+                    smu: formData.smu,
+                    smuOther: formData.smu === 'Others' ? formData.smuOther.trim() : '',
+                }
 
                 if (!props.isEdit) {
                     const payload: CreateProjectPayload = {
                         billingAccountId: normalizedBillingAccountId,
                         description: formData.description,
                         details: {
+                            ...projectMetadata,
                             displayMemberPaymentDetailsToCopilots:
                                 formData.displayMemberPaymentDetailsToCopilots,
                         },
@@ -398,6 +421,7 @@ export const ProjectEditorForm: FC<ProjectEditorFormProps> = (props: ProjectEdit
                     description: formData.description,
                     details: {
                         ...(props.projectDetail.details || {}),
+                        ...projectMetadata,
                         displayMemberPaymentDetailsToCopilots:
                             formData.displayMemberPaymentDetailsToCopilots,
                     },
@@ -543,6 +567,10 @@ export const ProjectEditorForm: FC<ProjectEditorFormProps> = (props: ProjectEdit
                         />
                     </div>
 
+                    <div className={styles.grid}>
+                        <ProjectMetadataFields />
+                    </div>
+
                     <div className={styles.grid}>
                         <FormRadioGroup
                             label='Enforce Topcoder NDA'
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx
new file mode 100644
index 000000000..d5520db4d
--- /dev/null
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx
@@ -0,0 +1,174 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { createProjectShowcasePost } from '../../../lib/services'
+import {
+    useFetchProject,
+    useFetchProjectShowcasePosts,
+    useFetchProjectShowcasePostCategories,
+    useFetchProjectShowcasePostIndustries,
+} from '../../../lib/hooks'
+import { showSuccessToast } from '../../../lib/utils/toast.utils'
+
+import { ProjectShowcasePage } from './ProjectShowcasePage'
+
+jest.mock('~/config', () => ({ AppSubdomain: { work: 'work' }, EnvironmentConfig: {} }), { virtual: true })
+jest.mock('filestack-js', () => ({ init: jest.fn() }))
+jest.mock('react-router-dom', () => ({ useParams: () => ({ projectId: '123' }) }))
+jest.mock('~/libs/ui', () => ({
+    BaseModal: (props: any): JSX.Element => (props.open ? <div>{props.children}</div> : <></>),
+    Button: (props: any): JSX.Element => (
+        <button
+            type={props.type === 'submit' ? 'submit' : 'button'}
+            onClick={props.onClick}
+            disabled={props.disabled}
+        >
+            {props.label}
+        </button>
+    ),
+    LoadingSpinner: (): JSX.Element => <div />,
+    useConfirmationModal: () => ({}),
+}), { virtual: true })
+jest.mock('../../../lib/contexts', () => {
+    const React: typeof import('react') = jest.requireActual('react')
+    return { WorkAppContext: React.createContext({ isAdmin: true, loginUserInfo: { userId: 42 }, userRoles: [] }) }
+})
+jest.mock('../../../lib/components', () => ({
+    ErrorMessage: (props: any): JSX.Element => <div>{props.message}</div>,
+    Pagination: (): JSX.Element => <div />,
+    ProjectPageWrapper: (props: any): JSX.Element => (
+        <div>
+            {props.headerActions}
+            {props.children}
+        </div>
+    ),
+    ProjectsShowcaseFilter: (): JSX.Element => <div />,
+    ShowcasePostPreview: (): JSX.Element => <div />,
+}))
+jest.mock('../../../lib/components/form', () => {
+    const forms: typeof import('react-hook-form') = jest.requireActual('react-hook-form')
+    return {
+        FormCheckboxField: (props: any): JSX.Element => {
+            const form = forms.useFormContext()
+            return <input aria-label={props.label} type='checkbox' {...form.register(props.name)} />
+        },
+        FormMarkdownEditor: (props: any): JSX.Element => {
+            const form = forms.useFormContext()
+            return <textarea aria-label={props.label} {...form.register(props.name)} />
+        },
+        FormSelectField: (props: any): JSX.Element => {
+            const form = forms.useFormContext()
+            return (
+                <select aria-label={props.label} multiple={props.isMulti} {...form.register(props.name)}>
+                    {!props.isMulti && <option value=''>Select</option>}
+                    {(props.options || []).map((option: any) => (
+                        <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                </select>
+            )
+        },
+        FormTextField: (props: any): JSX.Element => {
+            const form = forms.useFormContext()
+            return <input aria-label={props.label} {...form.register(props.name)} />
+        },
+    }
+})
+jest.mock('../../../lib/services', () => ({
+    createProjectShowcasePost: jest.fn(),
+}))
+jest.mock('../../../lib/hooks', () => ({
+    useFetchProject: jest.fn(),
+    useFetchProjectShowcasePostCategories: jest.fn(),
+    useFetchProjectShowcasePostIndustries: jest.fn(),
+    useFetchProjectShowcasePosts: jest.fn(),
+}))
+jest.mock('../../../lib/utils/permissions.utils', () => ({
+    checkCanManageProject: () => true,
+    hasManagerRole: () => true,
+}))
+jest.mock('../../../lib/utils/toast.utils', () => ({ showErrorToast: jest.fn(), showSuccessToast: jest.fn() }))
+
+describe('Showcase creation', () => {
+    const refreshProject = jest.fn()
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useFetchProject as jest.Mock).mockReturnValue({
+            mutate: refreshProject,
+            project: { details: { customer: 'Customer', dealCloseDate: '2026-09-16', smu: 'Europe' } },
+        });
+        (useFetchProjectShowcasePosts as jest.Mock).mockReturnValue({
+            metadata: { total: 0 }, mutate: jest.fn(), posts: [],
+        });
+        (useFetchProjectShowcasePostIndustries as jest.Mock).mockReturnValue({
+            items: [{ id: '1', name: 'Industry' }], mutate: jest.fn(),
+        });
+        (useFetchProjectShowcasePostCategories as jest.Mock).mockReturnValue({
+            items: [{ id: '2', name: 'Technology' }], mutate: jest.fn(),
+        });
+        (createProjectShowcasePost as jest.Mock).mockResolvedValue({ id: '1' })
+    })
+
+    /**
+     * Opens the form and fills the required fields for the save-path tests.
+     * @returns Nothing; updates the rendered form through user input events.
+     * @throws Testing Library errors if an expected field is missing.
+     */
+    function fillPost(): void {
+        render(<ProjectShowcasePage />)
+        fireEvent.click(screen.getByRole('button', { name: 'Create Post' }))
+        fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Title' } })
+        fireEvent.change(screen.getByLabelText('Type'), { target: { value: 'Open Innovation' } })
+        fireEvent.change(screen.getByLabelText('The Solution'), { target: { value: 'Solution' } })
+        for (const label of ['Industry/Sector', 'Category/Technology']) {
+            const select = screen.getByLabelText(label) as HTMLSelectElement
+            select.options[0].selected = true
+            fireEvent.change(select)
+        }
+    }
+
+    it('prefills project metadata, defaults WIN off and saves metadata with the post', async () => {
+        fillPost()
+        expect((screen.getByLabelText(/^Customer/) as HTMLInputElement).value)
+            .toBe('Customer')
+        expect((screen.getByLabelText(/^Deal Close Date/) as HTMLInputElement).value)
+            .toBe('2026-09-16')
+        expect((screen.getByLabelText('Send to WIN') as HTMLInputElement).checked)
+            .toBe(false)
+        fireEvent.change(screen.getByLabelText(/^Customer/), { target: { value: 'Updated customer' } })
+        fireEvent.click(screen.getByLabelText('Send to WIN'))
+        fireEvent.click(screen.getByRole('button', { name: 'Create' }))
+        await waitFor(() => expect(createProjectShowcasePost)
+            .toHaveBeenCalledWith('123', expect.objectContaining({
+                content: 'Solution',
+                customer: 'Updated customer',
+                dealCloseDate: '2026-09-16',
+                sendToWin: true,
+                smu: 'Europe',
+                type: 'Open Innovation',
+            })))
+        await waitFor(() => expect(refreshProject)
+            .toHaveBeenCalled())
+        expect(showSuccessToast)
+            .toHaveBeenCalledWith('Post created successfully and made available to WIN')
+    })
+
+    it('keeps the form and reports the API error when saving fails', async () => {
+        (createProjectShowcasePost as jest.Mock).mockRejectedValue(new Error('Unable to save showcase'))
+        fillPost()
+        fireEvent.click(screen.getByRole('button', { name: 'Create' }))
+        await screen.findByText('Unable to save showcase')
+        expect(screen.getByLabelText('Title'))
+            .toBeTruthy()
+        expect(showSuccessToast).not.toHaveBeenCalled()
+    })
+
+    it('blocks a save without a type and customer', async () => {
+        fillPost()
+        fireEvent.change(screen.getByLabelText('Type'), { target: { value: '' } })
+        fireEvent.change(screen.getByLabelText(/^Customer/), { target: { value: ' ' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Create' }))
+        await screen.findByText('Customer is required')
+        expect(createProjectShowcasePost).not.toHaveBeenCalled()
+    })
+})
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
index 97d84dac5..7633cf5d7 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
@@ -15,6 +15,7 @@ import { useParams } from 'react-router-dom'
 import { SingleValue } from 'react-select'
 import classNames from 'classnames'
 
+import { yupResolver } from '@hookform/resolvers/yup'
 import { EnvironmentConfig } from '~/config'
 import { BaseModal, Button, LoadingSpinner, useConfirmationModal } from '~/libs/ui'
 
@@ -47,6 +48,7 @@ import {
     useFetchProjectShowcasePosts,
 } from '../../../lib/hooks'
 import {
+    FormCheckboxField,
     FormMarkdownEditor,
     FormSelectField,
     FormSelectOption,
@@ -57,14 +59,22 @@ import { checkCanManageProject, hasManagerRole } from '../../../lib/utils/permis
 import type {
     Challenge,
     FetchProjectShowcasePostsParams,
+    ProjectMetadata,
     ProjectShowcasePost,
     ProjectShowcasePostCategory,
     ProjectShowcasePostDetails,
     ProjectShowcasePostFilters,
     ProjectShowcasePostIndustry,
     ProjectShowcasePostTaxonomyItem,
+    ShowcaseMetadata,
     WorkAppContextModel,
 } from '../../../lib/models'
+import { ProjectMetadataFields } from '../../../lib/components/form/ProjectMetadataFields'
+import {
+    SHOWCASE_CURRENT_STATUS_VALUES,
+    SHOWCASE_TYPE_VALUES,
+} from '../../../lib/constants/showcase.constants'
+import { showcasePostSchema } from '../../../lib/schemas/showcase-post.schema'
 
 import styles from './ProjectShowcasePage.module.scss'
 
@@ -187,6 +197,17 @@ function normalizeTaxonomyOption(item: ProjectShowcasePostCategory | ProjectShow
 }
 
 interface ProjectShowcasePostFormData {
+    type: string
+    customer: string
+    smu: string
+    smuOther: string
+    dealCloseDate: string
+    challenge: string
+    businessImpact: string
+    keyWin: string
+    currentStatus: string
+    owner: string
+    sendToWin: boolean
     title: string
     content: string
     industryIds: string[]
@@ -199,18 +220,62 @@ interface ProjectShowcasePostFormData {
     }>
 }
 
-function mapPostToFormData(post?: ProjectShowcasePost): ProjectShowcasePostFormData {
+/**
+ * Initializes showcase content and the current shared project metadata.
+ * @param post Existing post for editing, or undefined for a new post.
+ * @param projectMetadata Current project values; post responses supply them when editing.
+ * @returns Complete form defaults with WIN sharing off for new posts.
+ * @throws Does not throw.
+ */
+function mapPostToFormData(
+    post?: ProjectShowcasePost,
+    projectMetadata?: ProjectMetadata,
+): ProjectShowcasePostFormData {
+    const metadata = projectMetadata || post
     return {
+        businessImpact: post?.businessImpact || '',
         categoryIds: post?.categories.map(item => item.id) || [],
+        challenge: post?.challenge || '',
         challengeIds: post?.challengeIds || [],
         content: post?.content || '',
+        currentStatus: post?.currentStatus || '',
+        customer: metadata?.customer || '',
+        dealCloseDate: metadata?.dealCloseDate || '',
         industryIds: post?.industries.map(item => item.id) || [],
+        keyWin: post?.keyWin || '',
         media: post?.media?.map(item => ({
             alt: item.alt,
             type: item.type,
             url: item.url,
         })) || [],
+        owner: post?.owner || '',
+        sendToWin: post?.sendToWin === true,
+        smu: metadata?.smu || '',
+        smuOther: metadata?.smuOther || '',
         title: post?.title || '',
+        type: post?.type || '',
+    }
+}
+
+/**
+ * Selects the shared fields sent with a full showcase save.
+ * @param data Current showcase form values.
+ * @returns Normalized post metadata and project metadata, clearing an unused custom SMU.
+ * @throws Does not throw.
+ */
+function getShowcaseMetadata(data: ProjectShowcasePostFormData): ShowcaseMetadata {
+    return {
+        businessImpact: data.businessImpact,
+        challenge: data.challenge,
+        currentStatus: data.currentStatus,
+        customer: data.customer.trim(),
+        dealCloseDate: data.dealCloseDate,
+        keyWin: data.keyWin.trim(),
+        owner: data.owner.trim(),
+        sendToWin: data.sendToWin,
+        smu: data.smu,
+        smuOther: data.smu === 'Others' ? data.smuOther.trim() : '',
+        type: data.type,
     }
 }
 
@@ -248,6 +313,12 @@ interface BuildShowcasePreviewDataParams {
     editingPost?: ProjectShowcasePostDetails
 }
 
+/**
+ * Builds the preview using current form values and challenge statistics.
+ * @param params Form fields, taxonomy options, project context and existing post metadata.
+ * @returns Preview data including all WIN fields and existing challenge/media metadata.
+ * @throws Propagates errors from required challenge lookups.
+ */
 async function buildShowcasePreviewData(
     params: BuildShowcasePreviewDataParams,
 ): Promise<ShowcasePostPreviewData> {
@@ -343,6 +414,7 @@ async function buildShowcasePreviewData(
     ].join('/')
 
     return {
+        ...getShowcaseMetadata(formData),
         categories: resolveTaxonomyItems(formData.categoryIds, categoryOptions),
         challengeCount,
         challenges,
@@ -520,6 +592,10 @@ export const ProjectShowcasePage: FC = () => {
     const isFirstDebouncedRender = useRef<boolean>(true)
 
     const projectResult = useFetchProject(projectId || undefined)
+    const projectMetadataRef = useRef<ProjectMetadata>()
+    useEffect(() => {
+        projectMetadataRef.current = projectResult.project?.details
+    }, [projectResult.project?.details])
     const industriesResult = useFetchProjectShowcasePostIndustries()
     const categoriesResult = useFetchProjectShowcasePostCategories()
 
@@ -845,13 +921,13 @@ export const ProjectShowcasePage: FC = () => {
     const formMethods = useForm<ProjectShowcasePostFormData>({
         defaultValues: mapPostToFormData(),
         mode: 'all',
+        resolver: yupResolver(showcasePostSchema) as any,
     })
 
     const {
         getValues,
         handleSubmit,
         reset,
-        setError,
         setValue,
         watch,
     }: UseFormReturn<ProjectShowcasePostFormData, any, ProjectShowcasePostFormData> = formMethods
@@ -1279,7 +1355,7 @@ export const ProjectShowcasePage: FC = () => {
         }
 
         if (manageMode === 'create') {
-            reset(mapPostToFormData())
+            reset(mapPostToFormData(undefined, projectMetadataRef.current))
             setSelectedChallengeOptions([])
             setFormError(undefined)
             setSelectedPostId(undefined)
@@ -1454,7 +1530,7 @@ export const ProjectShowcasePage: FC = () => {
                                         </span>
                                     </td>
                                     <td>{formatDate(post.createdAt)}</td>
-                                    <td>{post.createdByHandle || '—'}</td>
+                                    <td>{post.owner || post.createdByHandle || '—'}</td>
                                     <td>
                                         {post.industries
                                             .map(item => item.name)
@@ -1570,32 +1646,6 @@ export const ProjectShowcasePage: FC = () => {
                             setFormError(undefined)
                             setIsSaving(true)
 
-                            if (!data.title.trim()) {
-                                setError('title', { message: 'Title is required.', type: 'required' })
-                            }
-
-                            if (!data.content.trim()) {
-                                setError('content', { message: 'Content is required.', type: 'required' })
-                            }
-
-                            if (!data.industryIds.length) {
-                                setError('industryIds', { message: 'Select at least one industry.', type: 'required' })
-                            }
-
-                            if (!data.categoryIds.length) {
-                                setError('categoryIds', { message: 'Select at least one category.', type: 'required' })
-                            }
-
-                            if (
-                                !data.title.trim()
-                                || !data.content.trim()
-                                || !data.industryIds.length
-                                || !data.categoryIds.length
-                            ) {
-                                setIsSaving(false)
-                                return
-                            }
-
                             try {
                                 const resolvedIndustryIds = await resolveTaxonomyIds(
                                     data.industryIds,
@@ -1610,6 +1660,7 @@ export const ProjectShowcasePage: FC = () => {
 
                                 if (manageMode === 'create') {
                                     await createProjectShowcasePost(projectId, {
+                                        ...getShowcaseMetadata(data),
                                         categoryIds: resolvedCategoryIds,
                                         challengeIds: data.challengeIds,
                                         content: data.content.trim(),
@@ -1622,13 +1673,17 @@ export const ProjectShowcasePage: FC = () => {
                                     })
                                     setIsManageModalOpen(false)
                                     await Promise.all([
+                                        projectResult.mutate(),
                                         postsResult.mutate(),
                                         industriesResult.mutate(),
                                         categoriesResult.mutate(),
                                     ])
-                                    showSuccessToast('Post created successfully')
+                                    showSuccessToast(data.sendToWin
+                                        ? 'Post created successfully and made available to WIN'
+                                        : 'Post created successfully')
                                 } else if (selectedPostId) {
                                     await updateProjectShowcasePost(projectId, selectedPostId, {
+                                        ...getShowcaseMetadata(data),
                                         categoryIds: resolvedCategoryIds,
                                         challengeIds: data.challengeIds,
                                         content: data.content.trim(),
@@ -1641,11 +1696,14 @@ export const ProjectShowcasePage: FC = () => {
                                     })
                                     setIsManageModalOpen(false)
                                     await Promise.all([
+                                        projectResult.mutate(),
                                         postsResult.mutate(),
                                         industriesResult.mutate(),
                                         categoriesResult.mutate(),
                                     ])
-                                    showSuccessToast('Post updated successfully')
+                                    showSuccessToast(data.sendToWin
+                                        ? 'Post updated successfully and made available to WIN'
+                                        : 'Post updated successfully')
                                 }
                             } catch (err) {
                                 const message = err instanceof Error
@@ -1674,16 +1732,19 @@ export const ProjectShowcasePage: FC = () => {
                             </div>
 
                             <div className={styles.modalField}>
-                                <FormMarkdownEditor
-                                    label='Content'
-                                    name='content'
+                                <FormSelectField
+                                    label='Type'
+                                    name='type'
+                                    options={SHOWCASE_TYPE_VALUES.map(value => ({ label: value, value }))}
                                     required
                                 />
                             </div>
 
+                            <ProjectMetadataFields className={styles.modalField} required />
+
                             <div className={styles.modalField}>
                                 <FormSelectField
-                                    label='Industries'
+                                    label='Industry/Sector'
                                     name='industryIds'
                                     options={industryOptions.slice(1)}
                                     isMulti
@@ -1695,7 +1756,7 @@ export const ProjectShowcasePage: FC = () => {
 
                             <div className={styles.modalField}>
                                 <FormSelectField
-                                    label='Categories'
+                                    label='Category/Technology'
                                     name='categoryIds'
                                     options={categoryOptions.slice(1)}
                                     isMulti
@@ -1705,6 +1766,22 @@ export const ProjectShowcasePage: FC = () => {
                                 />
                             </div>
 
+                            <div className={styles.modalField}>
+                                <FormMarkdownEditor label='The Challenge' name='challenge' />
+                            </div>
+
+                            <div className={styles.modalField}>
+                                <FormMarkdownEditor label='The Solution' name='content' required />
+                            </div>
+
+                            <div className={styles.modalField}>
+                                <FormMarkdownEditor label='Business Impact Realised' name='businessImpact' />
+                            </div>
+
+                            <div className={styles.modalField}>
+                                <FormTextField label='Key Win' name='keyWin' maxLength={255} />
+                            </div>
+
                             <div className={styles.modalField}>
                                 <div className={styles.mediaSectionHeader}>
                                     <span className={styles.mediaSectionLabel}>Post media</span>
@@ -1771,7 +1848,7 @@ export const ProjectShowcasePage: FC = () => {
 
                             <div className={styles.modalField}>
                                 <FormSelectField
-                                    label='Challenge'
+                                    label='Topcoder Challenge Launched'
                                     name='challengeIds'
                                     isAsync
                                     isMulti
@@ -1785,6 +1862,27 @@ export const ProjectShowcasePage: FC = () => {
                                     placeholder='Select a challenge'
                                 />
                             </div>
+
+                            <div className={styles.modalField}>
+                                <FormSelectField
+                                    label='Current Status'
+                                    name='currentStatus'
+                                    options={SHOWCASE_CURRENT_STATUS_VALUES.map(value => ({ label: value, value }))}
+                                    isClearable
+                                />
+                            </div>
+
+                            <div className={styles.modalField}>
+                                <FormTextField label='Owner' name='owner' maxLength={255} />
+                            </div>
+
+                            <div className={styles.modalField}>
+                                <FormCheckboxField
+                                    label='Send to WIN'
+                                    name='sendToWin'
+                                    hint='Make this showcase available to WIN when you save.'
+                                />
+                            </div>
                         </div>
 
                         <footer className={styles.modalFooter}>

From 64b2a9255b806afa08eba5ffe0d47bed9cc18278 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 16 Sep 2026 10:52:58 +1000
Subject: [PATCH 08/22] PM-6343 Add Sales report app and Work integration

---
 infrastructure/sales/README.md                |  41 +++
 infrastructure/sales/dev-viewer-request.js    |  27 ++
 src/apps/platform/src/platform.routes.tsx     |   2 +
 src/apps/sales/README.md                      |  33 ++
 src/apps/sales/index.ts                       |   1 +
 src/apps/sales/src/SalesPage.module.scss      |  73 ++++
 src/apps/sales/src/SalesPage.spec.tsx         | 144 ++++++++
 src/apps/sales/src/SalesPage.tsx              | 340 ++++++++++++++++++
 src/apps/sales/src/sales.models.ts            |  29 ++
 src/apps/sales/src/sales.routes.spec.tsx      |  26 ++
 src/apps/sales/src/sales.routes.tsx           |  17 +
 src/apps/sales/src/sales.scss                 |   1 +
 src/apps/sales/src/sales.service.ts           |  38 ++
 src/apps/work/README.md                       |   7 +
 src/apps/work/src/config/routes.config.ts     |   1 +
 .../NavTabs/config/tabs-config.spec.ts        |  10 +
 .../components/NavTabs/config/tabs-config.ts  |  12 +
 src/apps/work/src/work-app.routes.tsx         |  11 +
 src/config/constants.ts                       |   2 +
 src/libs/ui/lib/styles/2026/README.md         |   6 +-
 src/libs/ui/lib/styles/2026/_scope.scss       |   1 +
 21 files changed, 819 insertions(+), 3 deletions(-)
 create mode 100644 infrastructure/sales/README.md
 create mode 100644 infrastructure/sales/dev-viewer-request.js
 create mode 100644 src/apps/sales/README.md
 create mode 100644 src/apps/sales/index.ts
 create mode 100644 src/apps/sales/src/SalesPage.module.scss
 create mode 100644 src/apps/sales/src/SalesPage.spec.tsx
 create mode 100644 src/apps/sales/src/SalesPage.tsx
 create mode 100644 src/apps/sales/src/sales.models.ts
 create mode 100644 src/apps/sales/src/sales.routes.spec.tsx
 create mode 100644 src/apps/sales/src/sales.routes.tsx
 create mode 100644 src/apps/sales/src/sales.scss
 create mode 100644 src/apps/sales/src/sales.service.ts

diff --git a/infrastructure/sales/README.md b/infrastructure/sales/README.md
new file mode 100644
index 000000000..0a144b964
--- /dev/null
+++ b/infrastructure/sales/README.md
@@ -0,0 +1,41 @@
+# Sales dev route
+
+PM-6343 serves the branch build only on `sales.topcoder-dev.com`. The shared
+Platform UI S3 root and other app builds are preserved.
+
+| Resource | Dev value |
+| --- | --- |
+| AWS account / region | `811668436784` / `us-east-1` |
+| CloudFront distribution | `EFA7R1KH3UX5M` (`d10303ypawq4ub.cloudfront.net`) |
+| S3 bucket / prefix | `platform-mvp.topcoder-dev.com` / `sales-app/` |
+| Route 53 public hosted zone | `Z2CIRG3R0ZSGFQ` |
+| Host | `sales.topcoder-dev.com` |
+| Viewer request function | `platform-sales-dev-viewer-request` |
+
+Build with `nvm use` followed by
+`LOGICAL_ENV=dev PUBLIC_URL=/sales-app yarn run build`. Upload build files under
+the prefix without deleting shared objects. Give hashed assets immutable cache
+headers and `sales-app/index.html` `no-cache,no-store,max-age=0`.
+
+`dev-viewer-request.js` includes the existing Contact and Accounts routing from
+the live distribution. Its Sales branch rewrites navigation requests to
+`/sales-app/index.html` while allowing prefixed assets through. Test Sales root,
+deep links and assets, Contact and Accounts, and unrelated Work/Reports hosts
+before publishing. Re-read the live function when applying later changes to
+avoid overwriting newer routing. Attach the published function to the default
+behavior's viewer-request event, preserving every other association.
+
+Add the Sales alias to the existing distribution. Its ACM certificate already
+covers `*.topcoder-dev.com`. Add a Route 53 A alias (and AAAA when IPv6 is enabled)
+to the same distribution, preserving all existing DNS records. Invalidate only
+`/sales-app/*`. Authentication continues through the standard Platform UI login.
+
+Deploy the reports-api-v6 PM-6343 branch to dev with its normal `dev-PM-6343` tag
+workflow. Server-only Salesforce configuration is documented in that repo's
+`SALES.md`. The Sales page uses `/v6/reports/sales`; WIN uses the separate
+`/v6/reports/win/sales` endpoint and requires an M2M grant for `reports:sales`.
+
+Rollback: remove the Sales alias/DNS entries and restore the prior viewer-request
+function association, leaving shared settings intact. The isolated S3 prefix can
+be retained for investigation. Restore the prior Reports API ECS task revision
+if rolling back the backend. No database migration is involved.
diff --git a/infrastructure/sales/dev-viewer-request.js b/infrastructure/sales/dev-viewer-request.js
new file mode 100644
index 000000000..a5c358290
--- /dev/null
+++ b/infrastructure/sales/dev-viewer-request.js
@@ -0,0 +1,27 @@
+/**
+ * Routes the Sales, Contact and Accounts dev hosts to their isolated S3 shells.
+ * @param {Object} event CloudFront viewer-request event containing the URI and Host header.
+ * @returns {Object} Request with an app-specific SPA fallback; assets and unrelated hosts are preserved.
+ * @throws No exceptions for valid CloudFront request events; performs no network I/O.
+ */
+function handler(event) {
+    var request = event.request;
+    var host = request.headers.host ? request.headers.host.value.toLowerCase() : '';
+    var prefix = '';
+    if (host === 'sales.topcoder-dev.com' || host === 'sales.topcoder-dev.com:443') {
+        prefix = '/sales-app/';
+    } else if (host === 'contact.topcoder-dev.com' || host === 'contact.topcoder-dev.com:443') {
+        prefix = '/contact-app/';
+    } else if (host === 'account-settings.topcoder-dev.com' || host === 'account-settings.topcoder-dev.com:443') {
+        // Keep shared assets available to Accounts pages opened before its isolated deployment.
+        if (request.uri.indexOf('/static/') === 0
+            || ['/global.css', '/favicon.png', '/manifest.json', '/logo_512x512.png', '/robots.txt'].indexOf(request.uri) !== -1) {
+            return request;
+        }
+        prefix = '/accounts-preferences-app/';
+    }
+    if (prefix && request.uri.indexOf(prefix) !== 0) {
+        request.uri = prefix + 'index.html';
+    }
+    return request;
+}
diff --git a/src/apps/platform/src/platform.routes.tsx b/src/apps/platform/src/platform.routes.tsx
index ef61267ef..96c23c5a7 100644
--- a/src/apps/platform/src/platform.routes.tsx
+++ b/src/apps/platform/src/platform.routes.tsx
@@ -11,6 +11,7 @@ import { walletAdminRoutes } from '~/apps/wallet-admin'
 import { copilotsRoutes } from '~/apps/copilots'
 import { adminRoutes } from '~/apps/admin'
 import { reportsRoutes } from '~/apps/reports'
+import { salesRoutes } from '~/apps/sales'
 import { reviewRoutes } from '~/apps/review'
 import { workRoutes } from '~/apps/work'
 import { calendarRoutes } from '~/apps/calendar'
@@ -83,6 +84,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...homeRoutes,
     ...adminRoutes,
     ...reportsRoutes,
+    ...salesRoutes,
     ...customerPortalRoutes,
     ...notFoundRoutes,
 ]
diff --git a/src/apps/sales/README.md b/src/apps/sales/README.md
new file mode 100644
index 000000000..db6d1eb67
--- /dev/null
+++ b/src/apps/sales/README.md
@@ -0,0 +1,33 @@
+# Sales (PM-6343)
+
+Read-only Salesforce reporting for Administrators and Talent Managers. Available
+at `sales.topcoder.com` / `sales.topcoder-dev.com`, `/sales` on the combined host,
+and the **Sales** tab inside Work (`/sales` on the Work host, `/work/sales` on the
+combined host). Route guards and the Reports API independently enforce access.
+
+The page calls `GET {REPORTS_API}/sales` with the signed-in user's token. All
+Salesforce credentials stay in `reports-api-v6`. No create, update, delete,
+export, machine credentials or direct Salesforce API calls exist in the UI.
+
+Report metadata determines every displayed column, including grouped Stage.
+Search and column substring filters apply on **Apply**; headers sort globally
+before server pagination. Changing a filter, sort or page size starts at page
+one. Clear resets filters and sorting. Null display values use an em dash.
+The semantic HTML table provides keyboard sorting, `aria-sort`, and a focusable
+horizontal scroll region for wide reports; the shared Table component performs
+client sorting and is intentionally not used for this server-paginated report.
+
+Refresh preserves filters and sorting. Visible tabs poll every 60 seconds and
+refresh on returning from a hidden tab; obsolete requests are aborted and
+ignored. Failed refreshes keep the prior snapshot visibly marked as stale;
+401/403 responses remove it. Loading, retry, empty and upstream truncation states
+are explicit. `allData: false` warns that filters and totals cover only received
+rows, because Salesforce Analytics caps report details at 2,000 records.
+
+The app opts into scoped shared 2026 foundations, using Figtree headings, Nunito
+Sans body text, semantic color tokens, shared buttons, inputs and loading
+controls. Source design guidance:
+[Topcoder Design System — August 2026](https://www.figma.com/design/C2cA6508RhpjWJDp7MLKbO/Topcoder-Design-System---Aug-2026?node-id=1-54).
+
+Run `nvm use` in platform-ui before `yarn lint`, `LOGICAL_ENV=dev yarn run build`,
+and `CI=true yarn test:no-watch --runInBand --watch=false sales`.
diff --git a/src/apps/sales/index.ts b/src/apps/sales/index.ts
new file mode 100644
index 000000000..eaa1e970e
--- /dev/null
+++ b/src/apps/sales/index.ts
@@ -0,0 +1 @@
+export { salesRoutes } from './src/sales.routes'
diff --git a/src/apps/sales/src/SalesPage.module.scss b/src/apps/sales/src/SalesPage.module.scss
new file mode 100644
index 000000000..80e29a24c
--- /dev/null
+++ b/src/apps/sales/src/SalesPage.module.scss
@@ -0,0 +1,73 @@
+@import '@libs/ui/styles/2026/tokens';
+
+.page {
+    width: 100%;
+    max-width: 1800px;
+    margin: 0 auto;
+    padding: 40px 48px 64px;
+    min-height: 70vh;
+}
+
+.header, .headerActions, .panelHeader, .status, .pagination, .pageControls, .filterActions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header, .panelHeader, .status, .pagination { justify-content: space-between; }
+
+.eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    color: $tc-2026-muted;
+    margin-bottom: 8px;
+}
+
+.subtitle { margin-top: 8px; font-size: 16px; color: $tc-2026-muted; }
+.readOnly, .count { border-radius: 20px; background: $tc-2026-canvas; padding: 6px 12px; font-weight: 700; }
+.readOnly { border: 1px solid $tc-2026-border; color: $tc-2026-muted; }
+.refresh { background: $tc-2026-teal !important; border-color: $tc-2026-teal !important; }
+.status { margin: 24px 0; color: $tc-2026-muted; font-size: 13px; flex-wrap: wrap; gap: 8px; }
+.panel { background: $tc-2026-surface; border: 1px solid $tc-2026-border; border-radius: $tc-2026-radius-lg; overflow: hidden; box-shadow: $tc-2026-shadow-card; }
+.panelHeader { padding: 24px; border-bottom: 1px solid $tc-2026-border; }
+.panelHeader h2 { font-size: $tc-2026-h4-size; line-height: 32px; }
+.panelHeader p { margin-top: 4px; color: $tc-2026-muted; }
+.filters { padding: 24px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; background: $tc-2026-canvas; }
+.search { flex: 1 1 220px; min-width: 160px; margin-bottom: 0; }
+.selectField { display: flex; flex-direction: column; gap: 8px; font-weight: 700; flex: 1 1 180px; }
+.selectField select, .pageControls select { background: $tc-2026-surface; border: 1px solid $tc-2026-border-strong; padding: 10px 12px; min-height: 40px; color: $tc-2026-body; font-weight: 400; max-width: 100%; }
+.filterActions { min-height: 48px; }
+.tableScroll { overflow-x: auto; width: 100%; }
+.table { width: 100%; border-collapse: collapse; text-align: left; }
+.table th { background: $tc-2026-canvas; white-space: nowrap; border-bottom: 1px solid $tc-2026-border; }
+.table th button { padding: 16px 20px; width: 100%; text-align: left; color: $tc-2026-body; font-weight: 700; border: 0; background: transparent; cursor: pointer; }
+.table th button:hover { color: $tc-2026-teal; }
+.table td { border-bottom: 1px solid $tc-2026-border; padding: 16px 20px; min-width: 140px; max-width: 420px; overflow-wrap: anywhere; vertical-align: top; }
+.table tr:last-child td { border-bottom: 0; }
+.table tbody tr:hover { background: $tc-2026-canvas; }
+.pagination { padding: 20px 24px; border-top: 1px solid $tc-2026-border; flex-wrap: wrap; font-size: 13px; }
+.pageControls { flex-wrap: wrap; gap: 12px; }
+.error, .warning { padding: 20px 24px; margin-bottom: 24px; border-radius: $tc-2026-radius-md; background: $tc-2026-surface; }
+.error { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid $tc-2026-danger; color: $tc-2026-danger; }
+.warning { border: 1px solid $tc-2026-warning; color: $tc-2026-body; }
+.empty { padding: 48px 24px; min-height: 180px; text-align: center; position: relative; }
+.empty h3 { font-size: 24px; }
+.empty p { color: $tc-2026-muted; margin-top: 8px; }
+.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (max-width: 900px) {
+    .page { padding: 24px; }
+    .header { align-items: flex-start; flex-wrap: wrap; }
+    .pageControls { gap: 8px; }
+}
+
+@media (max-width: 600px) {
+    .page { padding: 20px 12px 40px; }
+    .header h1 { font-size: 36px; line-height: 44px; }
+    .headerActions { width: 100%; justify-content: space-between; }
+    .panelHeader, .filters, .pagination { padding: 16px; }
+    .panelHeader { align-items: flex-start; flex-direction: column; }
+    .search, .selectField { flex-basis: 100%; }
+    .error { align-items: flex-start; flex-direction: column; }
+}
diff --git a/src/apps/sales/src/SalesPage.spec.tsx b/src/apps/sales/src/SalesPage.spec.tsx
new file mode 100644
index 000000000..7cdb02112
--- /dev/null
+++ b/src/apps/sales/src/SalesPage.spec.tsx
@@ -0,0 +1,144 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import '@testing-library/jest-dom'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { ButtonHTMLAttributes, ChangeEvent, ReactNode } from 'react'
+
+import SalesPage from './SalesPage'
+import { SalesReport } from './sales.models'
+import { fetchSalesReport } from './sales.service'
+
+jest.mock('./sales.service', () => ({
+    fetchSalesReport: jest.fn(),
+    salesErrorMessage: () => 'Unable to refresh. Please try again.',
+}))
+
+jest.mock('~/libs/ui', () => ({
+    Button: (props: ButtonHTMLAttributes<HTMLButtonElement>) => (
+        <button disabled={props.disabled} onClick={props.onClick} type={props.type === 'submit' ? 'submit' : 'button'}>
+            {props.children}
+        </button>
+    ),
+    IconOutline: { RefreshIcon: () => <span /> },
+    InputText: (props: {
+        label: string; disabled?: boolean; name: string; value: string;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void
+    }) => (
+        <label htmlFor={props.name}>
+            {props.label}
+            <input disabled={props.disabled} id={props.name} value={props.value} onChange={props.onChange} />
+        </label>
+    ),
+    LoadingSpinner: (props: { message: string }) => <span>{props.message}</span>,
+    PageTitle: (props: { children: ReactNode }) => <title>{props.children}</title>,
+}), { virtual: true })
+
+const fetchReport = fetchSalesReport as jest.MockedFunction<typeof fetchSalesReport>
+
+/** Creates non-customer Sales test data. @returns A synthetic report page. Does not throw. */
+function fixture(): SalesReport {
+    return {
+        allData: true,
+        columns: [{ dataType: 'string', id: 'NAME', label: 'Opportunity' }],
+        page: 1,
+        perPage: 25,
+        refreshAfterSeconds: 60,
+        refreshedAt: '2026-09-16T02:00:00Z',
+        reportId: 'test-report',
+        reportName: 'Bookings By Stage',
+        rows: [{ cells: [{ label: 'Example opportunity', value: 'record-id' }], id: '0:0' }],
+        sourceRowCount: 30,
+        total: 30,
+        totalPages: 2,
+    }
+}
+
+describe('Sales page', () => {
+    beforeEach(() => fetchReport.mockReset()
+        .mockResolvedValue(fixture()))
+
+    it('renders live metadata and sends search, column filters, sorting and pagination to the API', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Example' } })
+        fireEvent.change(screen.getByLabelText('Filter field'), { target: { value: 'NAME' } })
+        fireEvent.change(screen.getByLabelText('Contains'), { target: { value: 'opportunity' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({
+                filterColumn: 'NAME', filterValue: 'opportunity', page: 1, search: 'Example',
+            }), expect.any(AbortSignal)))
+        await waitFor(() => expect(screen.getByRole('button', { name: 'Opportunity' }))
+            .not.toBeDisabled())
+        fireEvent.click(screen.getByRole('button', { name: 'Opportunity' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.objectContaining({ sortBy: 'NAME', sortOrder: 'asc' }),
+                expect.any(AbortSignal),
+            ))
+        await waitFor(() => expect(screen.getByRole('button', { name: 'Next' }))
+            .not.toBeDisabled())
+        fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({ page: 2 }), expect.any(AbortSignal)))
+    })
+
+    it('refreshes without losing filters and labels retained data after failure', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        fetchReport.mockRejectedValueOnce(new Error('upstream'))
+        fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+        await screen.findByText('Showing previously loaded data')
+        expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({ refresh: true }), expect.any(AbortSignal))
+        expect(screen.getByText('Example opportunity'))
+            .toBeInTheDocument()
+        fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+        await waitFor(() => expect(screen.queryByRole('alert')).not.toBeInTheDocument())
+    })
+
+    it('removes previously loaded sales data when authorization is revoked', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        fetchReport.mockRejectedValueOnce({ response: { status: 403 } })
+        fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+        await screen.findByText('Unable to load sales data')
+        expect(screen.queryByText('Example opportunity')).not.toBeInTheDocument()
+    })
+
+    it('shows completeness and empty-result states without rendering upstream markup', async () => {
+        fetchReport.mockResolvedValueOnce({ ...fixture(), allData: false, rows: [], total: 0, totalPages: 0 })
+        render(<SalesPage />)
+        await screen.findByText('No sales records found')
+        expect(screen.getByText(/Salesforce returned a limited set/))
+            .toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'Next' }))
+            .toBeDisabled()
+    })
+
+    it('refreshes visible tabs every minute and stops polling after unmount', async () => {
+        jest.useFakeTimers()
+        const visibility = jest.spyOn(document, 'visibilityState', 'get')
+            .mockReturnValue('visible')
+        const view = render(<SalesPage />)
+        await act(async () => { await Promise.resolve() })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+        await act(async () => { jest.advanceTimersByTime(60000) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(2)
+        visibility.mockReturnValue('hidden')
+        await act(async () => { jest.advanceTimersByTime(60000) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(2)
+        visibility.mockReturnValue('visible')
+        await act(async () => { fireEvent(document, new Event('visibilitychange')) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(3)
+        view.unmount()
+        await act(async () => { jest.advanceTimersByTime(60000) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(3)
+        visibility.mockRestore()
+        jest.useRealTimers()
+    })
+})
diff --git a/src/apps/sales/src/SalesPage.tsx b/src/apps/sales/src/SalesPage.tsx
new file mode 100644
index 000000000..0756d1886
--- /dev/null
+++ b/src/apps/sales/src/SalesPage.tsx
@@ -0,0 +1,340 @@
+/* Handlers capture the active report column or control value. */
+/* eslint react/jsx-no-bind: ["error", { "allowArrowFunctions": true, "allowFunctions": true }] */
+/* The horizontal report viewport must be focusable for keyboard scrolling. */
+/* eslint jsx-a11y/no-noninteractive-tabindex: ["error", { "roles": ["region"] }] */
+import { FC, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
+
+import { Button, IconOutline, InputText, LoadingSpinner, PageTitle } from '~/libs/ui'
+
+import { SalesQuery, SalesReport } from './sales.models'
+import { fetchSalesReport, salesErrorMessage } from './sales.service'
+import styles from './SalesPage.module.scss'
+import './sales.scss'
+
+const initialQuery: SalesQuery = { page: 1, perPage: 25 }
+
+/**
+ * Read-only Sales workspace, used on the dedicated host and inside Work.
+ * @returns An accessible metadata-driven report with server-side view controls and live refresh.
+ * @throws Does not throw request failures; shows inline recovery and stale-data status.
+ */
+const SalesPage: FC = () => {
+    const [query, setQuery] = useState<SalesQuery>(initialQuery)
+    const [search, setSearch] = useState('')
+    const [filterColumn, setFilterColumn] = useState('')
+    const [filterValue, setFilterValue] = useState('')
+    const [report, setReport] = useState<SalesReport>()
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
+    const [refreshVersion, setRefreshVersion] = useState(0)
+    const forceRefresh = useRef(false)
+    const busy = useRef(false)
+
+    /**
+     * Schedules a manual server refresh without resetting active filters or sorting.
+     * @returns Nothing; increments the request version. Does not throw.
+     */
+    const refresh = useCallback((): void => {
+        if (busy.current) return
+        forceRefresh.current = true
+        setRefreshVersion(value => value + 1)
+    }, [])
+
+    useEffect(() => {
+        const controller = new AbortController()
+        const shouldRefresh = forceRefresh.current
+        forceRefresh.current = false
+        busy.current = true
+        setLoading(true)
+        setError('')
+        fetchSalesReport({ ...query, refresh: shouldRefresh }, controller.signal)
+            .then(result => {
+                if (!controller.signal.aborted) setReport(result)
+            })
+            .catch(failure => {
+                if (controller.signal.aborted) return
+                const status = failure?.response?.status
+                // Do not retain protected data if the session or role is no longer valid.
+                if (status === 401 || status === 403) setReport(undefined)
+                setError(salesErrorMessage(failure))
+            })
+            .finally(() => {
+                if (!controller.signal.aborted) {
+                    busy.current = false
+                    setLoading(false)
+                }
+            })
+        return () => {
+            controller.abort()
+            busy.current = false
+        }
+    }, [query, refreshVersion])
+
+    useEffect(() => {
+        /** Refreshes a visible, idle page on the timer or on return to the tab; returns void and does not throw. */
+        function refreshVisible(): void {
+            if (document.visibilityState !== 'visible' || busy.current) return
+            refresh()
+        }
+
+        const timer = window.setInterval(refreshVisible, Math.max(60, report?.refreshAfterSeconds ?? 60) * 1000)
+        document.addEventListener('visibilitychange', refreshVisible)
+        return () => {
+            window.clearInterval(timer)
+            document.removeEventListener('visibilitychange', refreshVisible)
+        }
+    }, [refresh, report?.refreshAfterSeconds])
+
+    /** @param event Filter form submission. @returns Nothing; applies controls from page one. Does not throw. */
+    function applyFilters(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault()
+        setQuery(current => ({
+            ...current,
+            filterColumn: filterColumn && filterValue.trim() ? filterColumn : undefined,
+            filterValue: filterColumn && filterValue.trim() ? filterValue.trim() : undefined,
+            page: 1,
+            search: search.trim(),
+        }))
+    }
+
+    /** Clears filters and sorting after a schema change or empty search; returns void and does not throw. */
+    function clearFilters(): void {
+        setSearch('')
+        setFilterColumn('')
+        setFilterValue('')
+        setQuery({ ...initialQuery, perPage: query.perPage })
+    }
+
+    /** @param id Report column ID. @returns Nothing; toggles global sorting and resets pagination. Does not throw. */
+    function sortBy(id: string): void {
+        setQuery(current => ({
+            ...current,
+            page: 1,
+            sortBy: id,
+            sortOrder: current.sortBy === id && current.sortOrder === 'asc' ? 'desc' : 'asc',
+        }))
+    }
+
+    const firstRow = report?.total ? (report.page - 1) * report.perPage + 1 : 0
+    const lastRow = report ? Math.min(report.page * report.perPage, report.total) : 0
+    const updatedAt = report ? new Date(report.refreshedAt)
+        .toLocaleString() : ''
+
+    return (
+        <div className={`sales-app ${styles.page}`}>
+            <PageTitle>Sales</PageTitle>
+            <header className={styles.header}>
+                <div>
+                    <p className={styles.eyebrow}>WORK / SALES</p>
+                    <h1>Sales</h1>
+                    <p className={styles.subtitle}>Your sales pipeline, directly from Salesforce.</p>
+                </div>
+                <div className={styles.headerActions}>
+                    <span className={styles.readOnly}>Read only</span>
+                    <Button
+                        className={styles.refresh}
+                        disabled={loading}
+                        icon={IconOutline.RefreshIcon}
+                        iconToLeft
+                        noCaps
+                        onClick={refresh}
+                        primary
+                    >
+                        {loading && report ? 'Refreshing…' : 'Refresh'}
+                    </Button>
+                </div>
+            </header>
+
+            <div className={styles.status} aria-live='polite' role='status'>
+                <span>
+                    {report ? `Last updated ${updatedAt}` : 'Connecting to Salesforce'}
+                </span>
+                <span>Refreshes every minute while this page is visible</span>
+            </div>
+
+            {error && (
+                <div className={styles.error} role='alert'>
+                    <div>
+                        <strong>{report ? 'Showing previously loaded data' : 'Unable to load sales data'}</strong>
+                        <p>{error}</p>
+                    </div>
+                    <Button disabled={loading} noCaps onClick={refresh} secondary>Try again</Button>
+                </div>
+            )}
+
+            {report && !report.allData && (
+                <div className={styles.warning} role='status'>
+                    Salesforce returned a limited set of records. Search, filters and totals apply to the
+                    {' '}
+                    {report.sourceRowCount.toLocaleString()}
+                    {' '}
+                    received records. Refine the source report in Salesforce to view a complete result.
+                </div>
+            )}
+
+            <section className={styles.panel} aria-label='Sales report'>
+                <div className={styles.panelHeader}>
+                    <div>
+                        <h2>{report?.reportName || 'Sales report'}</h2>
+                        <p>Salesforce is the source of truth. Changes are made there.</p>
+                    </div>
+                    {report && (
+                        <span className={styles.count}>
+                            {report.total.toLocaleString()}
+                            {' '}
+                            records
+                        </span>
+                    )}
+                </div>
+
+                <form className={styles.filters} onSubmit={applyFilters}>
+                    <InputText
+                        classNameWrapper={styles.search}
+                        forceUpdateValue
+                        label='Search sales'
+                        maxLength={200}
+                        name='sales-search'
+                        onChange={event => setSearch(event.target.value)}
+                        placeholder='Search all report fields'
+                        tabIndex={0}
+                        type='text'
+                        value={search}
+                    />
+                    <label className={styles.selectField} htmlFor='sales-filter-column'>
+                        Filter field
+                        <select
+                            id='sales-filter-column'
+                            onChange={event => setFilterColumn(event.target.value)}
+                            value={filterColumn}
+                        >
+                            <option value=''>Choose a field</option>
+                            {report?.columns.map(column => (
+                                <option key={column.id} value={column.id}>{column.label}</option>
+                            ))}
+                        </select>
+                    </label>
+                    <InputText
+                        classNameWrapper={styles.search}
+                        disabled={!filterColumn}
+                        forceUpdateValue
+                        label='Contains'
+                        maxLength={200}
+                        name='sales-filter-value'
+                        onChange={event => setFilterValue(event.target.value)}
+                        placeholder='Filter value'
+                        tabIndex={0}
+                        type='text'
+                        value={filterValue}
+                    />
+                    <div className={styles.filterActions}>
+                        <Button disabled={loading || !report} noCaps secondary type='submit'>Apply</Button>
+                        <Button noCaps onClick={clearFilters} link>Clear</Button>
+                    </div>
+                </form>
+
+                {loading && !report && (
+                    <div className={styles.empty}><LoadingSpinner message='Loading sales report…' /></div>
+                )}
+                {report && (
+                    <>
+                        <div
+                            aria-busy={loading}
+                            aria-label='Sales records, scroll horizontally for more columns'
+                            className={styles.tableScroll}
+                            role='region'
+                            tabIndex={0}
+                        >
+                            <table className={styles.table}>
+                                <caption className={styles.visuallyHidden}>{report.reportName}</caption>
+                                <thead>
+                                    <tr>
+                                        {report.columns.map(column => (
+                                            <th
+                                                aria-sort={query.sortBy === column.id
+                                                    ? query.sortOrder === 'asc' ? 'ascending' : 'descending'
+                                                    : 'none'}
+                                                key={column.id}
+                                                scope='col'
+                                            >
+                                                <button
+                                                    disabled={loading}
+                                                    onClick={() => sortBy(column.id)}
+                                                    type='button'
+                                                >
+                                                    {column.label}
+                                                    <span aria-hidden='true'>
+                                                        {query.sortBy === column.id
+                                                            ? query.sortOrder === 'asc' ? ' ↑' : ' ↓'
+                                                            : ' ↕'}
+                                                    </span>
+                                                </button>
+                                            </th>
+                                        ))}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {report.rows.map(row => (
+                                        <tr key={row.id}>
+                                            {row.cells.map((cell, index) => (
+                                                <td key={report.columns[index].id}>
+                                                    {cell.label || '—'}
+                                                </td>
+                                            ))}
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                        {report.total === 0 && (
+                            <div className={styles.empty}>
+                                <h3>No sales records found</h3>
+                                <p>
+                                    {query.search || query.filterValue
+                                        ? 'Try a different search or clear the filters.'
+                                        : 'The Salesforce report does not contain any records yet.'}
+                                </p>
+                            </div>
+                        )}
+                        <div className={styles.pagination}>
+                            <p aria-live='polite'>
+                                {`Showing ${firstRow}–${lastRow} of ${report.total.toLocaleString()} records`}
+                            </p>
+                            <div className={styles.pageControls}>
+                                <label htmlFor='sales-page-size'>Rows per page</label>
+                                <select
+                                    disabled={loading}
+                                    id='sales-page-size'
+                                    onChange={event => setQuery(current => ({
+                                        ...current, page: 1, perPage: Number(event.target.value),
+                                    }))}
+                                    value={query.perPage}
+                                >
+                                    {[25, 50, 100, 200].map(size => <option key={size} value={size}>{size}</option>)}
+                                </select>
+                                <Button
+                                    disabled={loading || report.page <= 1}
+                                    noCaps
+                                    onClick={() => setQuery(current => ({ ...current, page: report.page - 1 }))}
+                                    secondary
+                                >
+                                    Previous
+                                </Button>
+                                <span>{`Page ${report.page} of ${Math.max(1, report.totalPages)}`}</span>
+                                <Button
+                                    disabled={loading || report.page >= report.totalPages}
+                                    noCaps
+                                    onClick={() => setQuery(current => ({ ...current, page: report.page + 1 }))}
+                                    secondary
+                                >
+                                    Next
+                                </Button>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </section>
+        </div>
+    )
+}
+
+export default SalesPage
diff --git a/src/apps/sales/src/sales.models.ts b/src/apps/sales/src/sales.models.ts
new file mode 100644
index 000000000..41664ddc7
--- /dev/null
+++ b/src/apps/sales/src/sales.models.ts
@@ -0,0 +1,29 @@
+/** Metadata-driven report contract shared by Sales and the WIN integration. */
+export interface SalesReport {
+    reportId: string
+    reportName: string
+    columns: Array<{ id: string; label: string; dataType: string }>
+    rows: Array<{
+        id: string
+        cells: Array<{ label: string; value: string | number | boolean | null; currencyCode?: string }>
+    }>
+    allData: boolean
+    sourceRowCount: number
+    total: number
+    page: number
+    perPage: number
+    totalPages: number
+    refreshedAt: string
+    refreshAfterSeconds: number
+}
+
+export interface SalesQuery {
+    page: number
+    perPage: number
+    search?: string
+    filterColumn?: string
+    filterValue?: string
+    sortBy?: string
+    sortOrder?: 'asc' | 'desc'
+    refresh?: boolean
+}
diff --git a/src/apps/sales/src/sales.routes.spec.tsx b/src/apps/sales/src/sales.routes.spec.tsx
new file mode 100644
index 000000000..e84c8641c
--- /dev/null
+++ b/src/apps/sales/src/sales.routes.spec.tsx
@@ -0,0 +1,26 @@
+import { UserRole } from '~/libs/core'
+
+import { salesRoutes } from './sales.routes'
+
+jest.mock('~/config', () => ({
+    AppSubdomain: { sales: 'sales' },
+    EnvironmentConfig: { SUBDOMAIN: 'platform-ui' },
+    ToolTitle: { sales: 'Sales' },
+}), { virtual: true })
+
+jest.mock('~/libs/core', () => ({
+    lazyLoad: () => (): JSX.Element => <div />,
+    UserRole: { administrator: 'administrator', talentManager: 'Talent Manager' },
+}), { virtual: true })
+
+describe('Sales routes', () => {
+    it('restricts combined-host and dedicated sales access to the two authorized roles', () => {
+        expect(salesRoutes[0])
+            .toMatchObject({
+                authRequired: true,
+                domain: 'sales',
+                rolesRequired: [UserRole.administrator, UserRole.talentManager],
+                route: '/sales',
+            })
+    })
+})
diff --git a/src/apps/sales/src/sales.routes.tsx b/src/apps/sales/src/sales.routes.tsx
new file mode 100644
index 000000000..757d4116a
--- /dev/null
+++ b/src/apps/sales/src/sales.routes.tsx
@@ -0,0 +1,17 @@
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core'
+
+const SalesPage: LazyLoadedComponent = lazyLoad(() => import('./SalesPage'))
+
+/** Dedicated Sales host and combined-host route; the API independently verifies these roles. */
+export const salesRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        domain: AppSubdomain.sales,
+        element: <SalesPage />,
+        id: ToolTitle.sales,
+        rolesRequired: [UserRole.administrator, UserRole.talentManager],
+        route: EnvironmentConfig.SUBDOMAIN === AppSubdomain.sales ? '' : '/sales',
+        title: ToolTitle.sales,
+    },
+]
diff --git a/src/apps/sales/src/sales.scss b/src/apps/sales/src/sales.scss
new file mode 100644
index 000000000..3dafeb7c5
--- /dev/null
+++ b/src/apps/sales/src/sales.scss
@@ -0,0 +1 @@
+@import '@libs/ui/styles/2026/index';
diff --git a/src/apps/sales/src/sales.service.ts b/src/apps/sales/src/sales.service.ts
new file mode 100644
index 000000000..8aefc94ed
--- /dev/null
+++ b/src/apps/sales/src/sales.service.ts
@@ -0,0 +1,38 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import { SalesQuery, SalesReport } from './sales.models'
+
+/**
+ * Reads Salesforce report data through the role-protected Reports API using the user's token.
+ * @param query Server-side search, filter, sorting, pagination and refresh options.
+ * @param signal Cancels obsolete requests when controls change or the page unmounts.
+ * @returns The current report schema and one page of rows.
+ * @throws Propagates network, authorization and sanitized Reports API errors.
+ */
+export function fetchSalesReport(query: SalesQuery, signal?: AbortSignal): Promise<SalesReport> {
+    const params = new URLSearchParams()
+    Object.entries(query)
+        .forEach(([key, value]) => {
+            if (value !== undefined && value !== '') params.set(key, String(value))
+        })
+    return xhrGetAsync<SalesReport>(`${EnvironmentConfig.REPORTS_API}/sales?${params.toString()}`, undefined, {
+        signal,
+        timeout: 120000,
+    })
+}
+
+/**
+ * Explains report failures without exposing transport internals or upstream responses.
+ * @param error Unknown request rejection.
+ * @returns User-facing recovery guidance, including explicit authorization failures.
+ * @throws Does not throw.
+ */
+export function salesErrorMessage(error: unknown): string {
+    const status = (error as { response?: { status?: number } })?.response?.status
+    if (status === 401) return 'Your session has expired. Sign in again to view sales data.'
+    if (status === 403) return 'Sales data is available to Administrators and Talent Managers.'
+    if (status === 503) return 'The sales connection is not configured yet. Contact your administrator.'
+    if (status === 400) return 'The report columns have changed. Clear the filters and sorting, then try again.'
+    return 'We could not refresh the Salesforce report. Please try again.'
+}
diff --git a/src/apps/work/README.md b/src/apps/work/README.md
index f04ba6d99..0f0031ea9 100644
--- a/src/apps/work/README.md
+++ b/src/apps/work/README.md
@@ -44,3 +44,10 @@ default and white on a teal hover background.
 
 Original implementation reference:
 - `work-manager/`
+
+## Sales
+
+The Sales tab opens the read-only Salesforce report for Administrators and Talent
+Managers. It is also available on the dedicated Sales host. Search, column
+filters, sorting, pagination and refresh use `reports-api-v6`; all edits remain
+in Salesforce. See [Sales app documentation](../sales/README.md).
diff --git a/src/apps/work/src/config/routes.config.ts b/src/apps/work/src/config/routes.config.ts
index 0f52369d1..458c98215 100644
--- a/src/apps/work/src/config/routes.config.ts
+++ b/src/apps/work/src/config/routes.config.ts
@@ -6,6 +6,7 @@ export const rootRoute: string
         : `/${AppSubdomain.work}`
 
 export const challengesRouteId = 'challenges'
+export const salesRouteId = 'sales'
 export const challengeCreateRouteId = 'challenge-create'
 export const challengeEditRouteId = 'challenge-edit'
 export const projectsRouteId = 'projects'
diff --git a/src/apps/work/src/lib/components/NavTabs/config/tabs-config.spec.ts b/src/apps/work/src/lib/components/NavTabs/config/tabs-config.spec.ts
index 217430eb5..8bd087b2e 100644
--- a/src/apps/work/src/lib/components/NavTabs/config/tabs-config.spec.ts
+++ b/src/apps/work/src/lib/components/NavTabs/config/tabs-config.spec.ts
@@ -18,6 +18,16 @@ jest.mock('../../../utils/permissions.utils', () => ({
 }))
 
 describe('getTabsConfig', () => {
+    it.each(['administrator', 'Talent Manager'])('shows sales for %s', role => {
+        expect(getTabsConfig([role], false)
+            .map(tab => tab.id))
+            .toContain('sales')
+    })
+
+    it.each(['copilot', 'Project Manager', 'Topcoder User'])('hides sales for %s', role => {
+        expect(getTabsConfig([role], false)
+            .map(tab => tab.id)).not.toContain('sales')
+    })
     it('shows the engagements tab for talent managers on the common work page', () => {
         expect(getTabsConfig(['talent manager'], false)
             .map(tab => tab.id))
diff --git a/src/apps/work/src/lib/components/NavTabs/config/tabs-config.ts b/src/apps/work/src/lib/components/NavTabs/config/tabs-config.ts
index f43b72cf2..a437cbb16 100644
--- a/src/apps/work/src/lib/components/NavTabs/config/tabs-config.ts
+++ b/src/apps/work/src/lib/components/NavTabs/config/tabs-config.ts
@@ -15,6 +15,7 @@ import {
     engagementsRouteId,
     groupsRouteId,
     projectsRouteId,
+    salesRouteId,
     taasRouteId,
 } from '../../../../config/routes.config'
 import { canViewAllEngagements } from '../../../utils/permissions.utils'
@@ -23,6 +24,13 @@ function hasAnyRole(userRoles: string[], roles: string[]): boolean {
     return userRoles.some(role => roles.includes(role.toLowerCase()))
 }
 
+/**
+ * Builds Work navigation, including Sales for Administrators and Talent Managers.
+ * @param userRoles Authenticated caller roles.
+ * @param isAnonymous Whether the visitor has no authenticated profile.
+ * @returns Visible Work tabs; anonymous visitors receive none.
+ * @throws Does not throw.
+ */
 export function getTabsConfig(userRoles: string[], isAnonymous: boolean): TabsNavItem[] {
     if (isAnonymous) {
         return []
@@ -72,6 +80,10 @@ export function getTabsConfig(userRoles: string[], isAnonymous: boolean): TabsNa
 
     const isCopilot = hasAnyRole(userRoles, COPILOT_ROLES)
 
+    if (isAdmin || hasAnyRole(userRoles, ['talent manager'])) {
+        tabs.push({ id: salesRouteId, title: 'Sales' })
+    }
+
     if (isAdmin || isCopilot || isManager) {
         tabs.push({
             id: groupsRouteId,
diff --git a/src/apps/work/src/work-app.routes.tsx b/src/apps/work/src/work-app.routes.tsx
index 9fc8cd5d4..72eb2b418 100644
--- a/src/apps/work/src/work-app.routes.tsx
+++ b/src/apps/work/src/work-app.routes.tsx
@@ -10,6 +10,7 @@ import {
     LazyLoadedComponent,
     PlatformRoute,
     Rewrite,
+    UserRole,
 } from '~/libs/core'
 
 import {
@@ -38,6 +39,7 @@ import {
     roleErrorRoute,
     roleErrorRouteId,
     rootRoute,
+    salesRouteId,
     taasCreateRouteId,
     taasEditRouteId,
     taasRouteId,
@@ -53,6 +55,7 @@ import { WorkAppContextModel } from './lib/models'
 import { canViewAllEngagements } from './lib/utils'
 
 const WorkApp: LazyLoadedComponent = lazyLoad(() => import('./WorkApp'))
+const SalesPage: LazyLoadedComponent = lazyLoad(() => import('~/apps/sales/src/SalesPage'))
 
 const ChallengesListPage: LazyLoadedComponent = lazyLoad(
     () => import('./pages/challenges/ChallengesListPage'),
@@ -287,6 +290,14 @@ export const workRoutes: ReadonlyArray<PlatformRoute> = [
                 route: projectsRouteId,
                 title: 'Projects',
             },
+            {
+                authRequired: true,
+                element: <SalesPage />,
+                id: salesRouteId,
+                rolesRequired: [UserRole.administrator, UserRole.talentManager],
+                route: salesRouteId,
+                title: 'Sales',
+            },
             {
                 authRequired: true,
                 element: (
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 9c52ca030..8d42331b0 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -19,6 +19,7 @@ export enum AppSubdomain {
     engagements = 'engagements',
     customer = 'customer',
     reports = 'reports',
+    sales = 'sales',
     procurement = 'procurement',
     status = 'status',
     support = 'support',
@@ -47,6 +48,7 @@ export enum ToolTitle {
     engagements = 'Engagements',
     customer = 'Customer',
     reports = 'Reports',
+    sales = 'Sales',
     procurement = 'Procurement',
     status = 'Status',
     support = 'Support',
diff --git a/src/libs/ui/lib/styles/2026/README.md b/src/libs/ui/lib/styles/2026/README.md
index 80fa4a168..a5ebdc1b4 100644
--- a/src/libs/ui/lib/styles/2026/README.md
+++ b/src/libs/ui/lib/styles/2026/README.md
@@ -3,7 +3,7 @@
 This folder contains the scoped foundations for the August 2026 Topcoder design
 system. The shared theme is imported only by the internal Work, System Admin,
 Calendar, Procurement, and Reports applications, plus Support, Opportunities,
-and Gigs.
+Gigs, and Sales.
 
 Engagements, the Copilots Portal, Review, and other non-migrated apps do not opt
 into these shared foundations. Their existing app and component styles continue
@@ -13,8 +13,8 @@ the shared theme.
 `_tokens.scss` is the source for the 2026 color, type, radius, and elevation
 tokens. `_scope.scss` exposes matching custom properties and base element styles
 under explicit internal app and Support body classes, and the low-specificity
-`:where(.opportunities-app)` and `:where(.gigs-app)` content containers.
-Opportunities and Gigs must not apply their theme classes to `body`, so their
+`:where(.opportunities-app)`, `:where(.gigs-app)`, and `:where(.sales-app)` content containers.
+Opportunities, Gigs, and Sales must not apply their theme classes to `body`, so their
 shared navigation retains the legacy styles.
 
 Keep the allowlist explicit: adding an unscoped `body`, heading, form, or table
diff --git a/src/libs/ui/lib/styles/2026/_scope.scss b/src/libs/ui/lib/styles/2026/_scope.scss
index 171c7da7f..c41c065b3 100644
--- a/src/libs/ui/lib/styles/2026/_scope.scss
+++ b/src/libs/ui/lib/styles/2026/_scope.scss
@@ -13,6 +13,7 @@ $tc-2026-apps:
     // Keep Opportunities and Gigs isolated from universal navigation while allowing
     // CSS-module component colors to override these low-specificity defaults.
     ':where(.opportunities-app)',
+    ':where(.sales-app)',
     ':where(.gigs-app)';
 
 @each $app in $tc-2026-apps {

From 31067c63da084f624413b5302fc3f44cb9a8f7e3 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 16 Sep 2026 11:06:04 +1000
Subject: [PATCH 09/22] PS-616 Display full installment totals in Wallet Admin

---
 docs/wallet-payment-installments.md           | 29 +++++++
 .../tabs/payments/PaymentsListView.spec.tsx   | 83 ++++++++++++++++---
 .../home/tabs/payments/PaymentsListView.tsx   | 13 ++-
 .../payment-view/PaymentView.spec.tsx         | 41 ++++++++-
 .../tabs/PaymentGeneralInfoTab.tsx            | 24 ++++++
 .../src/lib/models/WinningDetail.ts           |  2 +
 6 files changed, 174 insertions(+), 18 deletions(-)
 create mode 100644 docs/wallet-payment-installments.md

diff --git a/docs/wallet-payment-installments.md b/docs/wallet-payment-installments.md
new file mode 100644
index 000000000..6a0a9b591
--- /dev/null
+++ b/docs/wallet-payment-installments.md
@@ -0,0 +1,29 @@
+# Wallet Admin installment amounts
+
+Finance winnings can contain historical split payments. For PS-616, the two
+installments are $2,760 and $920, while each installment repeats the full $3,680
+in `totalAmount`.
+
+Wallet Admin uses the winning-level `grossAmount` supplied by Finance for the
+list, payment details summary and edit form. If that field is unavailable, it
+sums the returned installment `grossAmount` values, rounded to cents. It never
+adds the repeated `totalAmount` fields or billing markup. Finance returns all
+current installment rows, ordered with installment 1 first. Separate payment
+rows sharing an installment number are preserved because versions protect
+in-place updates rather than identifying historical copies.
+
+The General Info tab displays each installment's amount and status when there
+is more than one installment. The amount is the historical gross face value,
+including any cancelled installments; individual statuses remain visible in
+the breakdown. Primary-installment status/date behavior and payment mutations
+are unchanged. Member Wallet already displays the full `totalAmount`; its
+withdrawal flow is unchanged by this display correction.
+
+Deploy the companion Finance PS-616 change before the platform-ui change to
+provide the complete installment data. An older API that only returns the first
+installment cannot supply the omitted amount to the UI fallback. Finance CSV
+exports use the same winning-level gross summary.
+
+Regression tests cover the $2,760 + $920 split with and without the summary field,
+the amount passed to the details modal, single-installment amounts with billing
+markup, and paid/cancelled installment breakdowns.
diff --git a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.spec.tsx b/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.spec.tsx
index b67cccb13..b4b77881c 100644
--- a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.spec.tsx
+++ b/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.spec.tsx
@@ -34,7 +34,9 @@ jest.mock('../../../lib/services/wallet', () => ({
 jest.mock('../../../lib', () => ({
     FilterBar: (props: any) => mockFilterBar(props),
     formatIOSDateString: (value: string) => value,
-    PaymentView: () => <div>Payment View</div>,
+    PaymentView: (props: any) => (
+        <div data-testid='view-payment-amount'>{props.payment.grossAmountNumber}</div>
+    ),
 }))
 
 jest.mock('../../../lib/components/payment-edit/PaymentEdit', () => ({
@@ -51,15 +53,22 @@ jest.mock('../../../lib/components/payments-table/PaymentTable', () => ({
             <div>
                 <div>Payment Table</div>
                 {props.payments.map((payment: any) => (
-                    <button
-                        key={payment.id}
-                        type='button'
-                        onClick={() => props.onSelectionChange?.({ [payment.id]: payment })}
-                    >
-                        Select
-                        {' '}
-                        {payment.handle}
-                    </button>
+                    <div key={payment.id}>
+                        <span>{payment.grossAmount}</span>
+                        <button
+                            type='button'
+                            onClick={() => props.onSelectionChange?.({ [payment.id]: payment })}
+                        >
+                            Select
+                            {' '}
+                            {payment.handle}
+                        </button>
+                        <button type='button' onClick={() => props.onPaymentViewClick(payment)}>
+                            View payment
+                            {' '}
+                            {payment.id}
+                        </button>
+                    </div>
                 ))}
                 {props.payments.length > 1 && (
                     <button
@@ -266,6 +275,60 @@ describe('PaymentsListView', () => {
         jest.clearAllMocks()
     })
 
+    it.each([3680, undefined])(
+        'shows the full split payment in the list and details with API gross summary %s',
+        async grossAmount => {
+            mockedGetPayments.mockResolvedValue({
+                ...paymentsResponse,
+                winnings: [{
+                    ...paymentsResponse.winnings[0],
+                    category: 'TASK_PAYMENT',
+                    details: [2760, 920].map((amount, index) => ({
+                        currency: 'USD',
+                        datePaid: '2024-03-20T14:19:07.000Z',
+                        grossAmount: String(amount),
+                        id: `installment-${index + 1}`,
+                        installmentNumber: index + 1,
+                        status: 'PAID',
+                        totalAmount: '3680',
+                    })),
+                    grossAmount,
+                }],
+            })
+
+            render(<PaymentsListView profile={{ roles: ['Payment Admin'] } as any} />)
+
+            expect(await screen.findByText('$3,680.00'))
+                .toBeTruthy()
+            expect(screen.queryByText('$7,360.00'))
+                .toBeNull()
+            fireEvent.click(screen.getByRole('button', { name: 'View payment winning-1' }))
+            expect((await screen.findByTestId('view-payment-amount')).textContent)
+                .toBe('3680')
+        },
+    )
+
+    it('keeps the single-installment member amount separate from billing markup', async () => {
+        mockedGetPayments.mockResolvedValue({
+            ...paymentsResponse,
+            winnings: [{
+                ...paymentsResponse.winnings[0],
+                details: [{
+                    ...paymentsResponse.winnings[0].details[0],
+                    grossAmount: '2400',
+                    totalAmount: '3000',
+                }],
+            }],
+        })
+
+        render(<PaymentsListView profile={{ roles: ['Payment Admin'] } as any} />)
+
+        expect(await screen.findByText('$2,400.00'))
+            .toBeTruthy()
+        expect(screen.queryByText('$3,000.00'))
+            .toBeNull()
+    })
+
     it('defaults the approver view to the On Hold (Admin) status filter and both allowed categories', async () => {
         const approverDates = getApproverDefaultDateRangeForTest()
 
diff --git a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.tsx b/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.tsx
index 9892e9bc4..03474c04f 100644
--- a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.tsx
+++ b/src/apps/wallet-admin/src/home/tabs/payments/PaymentsListView.tsx
@@ -212,8 +212,10 @@ function getWinningAssignmentId(payment: WinningDetail): string | undefined {
  * @param payment raw finance winning row returned by the payouts API.
  * @param handleMap member-handle lookup keyed by winner identifier.
  * @returns the normalized winning record rendered by the payments table.
- * @remarks The release date and hold status are derived here to keep the
- * component-level mapping callback trivial.
+ * @throws RangeError when currency/date formatting receives an invalid value.
+ * @remarks Uses the Finance gross summary, falling back to summed installment
+ * gross amounts for compatible older responses. Repeated totalAmount values
+ * are never added. The release date and hold status use the primary installment.
  */
 // eslint-disable-next-line complexity
 function convertPaymentToWinning(payment: WinningDetail, handleMap: Map<number, string>): Winning {
@@ -221,6 +223,9 @@ function convertPaymentToWinning(payment: WinningDetail, handleMap: Map<number,
     const releaseDate = new Date(payment.releaseDate)
     const diffMs = releaseDate.getTime() - now.getTime()
     const diffHours = diffMs / (1000 * 60 * 60)
+    const grossAmount = payment.grossAmount ?? Number(payment.details
+        .reduce((total, installment) => total + Number(installment.grossAmount), 0)
+        .toFixed(2))
 
     let formattedReleaseDate
     if (diffHours > 0 && diffHours <= 24) {
@@ -262,8 +267,8 @@ function convertPaymentToWinning(payment: WinningDetail, handleMap: Map<number,
         description: payment.description,
         details: payment.details,
         externalId: payment.externalId,
-        grossAmount: formatCurrency(payment.details[0].grossAmount, payment.details[0].currency),
-        grossAmountNumber: parseFloat(payment.details[0].grossAmount),
+        grossAmount: formatCurrency(String(grossAmount), payment.details[0].currency),
+        grossAmountNumber: grossAmount,
         handle: handleMap.get(parseInt(payment.winnerId, 10)) ?? payment.winnerId,
         id: payment.id,
         releaseDate: formattedReleaseDate,
diff --git a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
index b0212e76b..54635b61b 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
+++ b/src/apps/wallet-admin/src/lib/components/payment-view/PaymentView.spec.tsx
@@ -36,10 +36,8 @@ jest.mock('~/libs/ui', () => ({
         </button>
     ),
     IconOutline: {
-        CheckIcon: () => <span>check-icon</span>,
-    },
-    IconSolid: {
-        ExclamationIcon: () => <span>exclamation-icon</span>,
+        CheckCircleIcon: () => <span>check-icon</span>,
+        ExclamationCircleIcon: () => <span>exclamation-icon</span>,
         XCircleIcon: () => <span>x-icon</span>,
     },
 }), { virtual: true })
@@ -126,6 +124,41 @@ describe('PaymentView', () => {
         jest.clearAllMocks()
     })
 
+    it.each(['PAID', 'CANCELLED'])(
+        'shows the gross total and individual installment amounts/statuses when installment 2 is %s',
+        async secondStatus => {
+            const splitPayment: Winning = {
+                ...payment,
+                details: [2760, 920].map((amount, index) => ({
+                    currency: 'USD',
+                    datePaid: '2024-03-20T14:19:07.000Z',
+                    grossAmount: String(amount),
+                    id: `installment-${index + 1}`,
+                    installmentNumber: index + 1,
+                    status: index === 0 ? 'PAID' : secondStatus,
+                    totalAmount: '3680',
+                })),
+                grossAmount: '$3,680.00',
+                grossAmountNumber: 3680,
+                status: 'Paid',
+                type: 'task payment',
+            }
+
+            render(<PaymentView payment={splitPayment} onClose={jest.fn()} />)
+
+            expect(await screen.findByText('Installments'))
+                .toBeTruthy()
+            expect(screen.getByText('$3,680.00'))
+                .toBeTruthy()
+            expect(screen.getByText('Installment 1: $2,760.00 — paid'))
+                .toBeTruthy()
+            expect(screen.getByText(`Installment 2: $920.00 — ${secondStatus.toLowerCase()}`))
+                .toBeTruthy()
+            await waitFor(() => expect(mockedFetchWinningPaymentDetails)
+                .toHaveBeenCalled())
+        },
+    )
+
     it('renders engagement payment details with tabs and agreement match banner', async () => {
         render(<PaymentView payment={payment} onClose={jest.fn()} />)
 
diff --git a/src/apps/wallet-admin/src/lib/components/payment-view/tabs/PaymentGeneralInfoTab.tsx b/src/apps/wallet-admin/src/lib/components/payment-view/tabs/PaymentGeneralInfoTab.tsx
index 78e932629..962d1895e 100644
--- a/src/apps/wallet-admin/src/lib/components/payment-view/tabs/PaymentGeneralInfoTab.tsx
+++ b/src/apps/wallet-admin/src/lib/components/payment-view/tabs/PaymentGeneralInfoTab.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
 import { Winning } from '../../../models/WinningDetail'
+import { formatCurrencyAmount } from '../payment-view.utils'
 import styles from '../PaymentView.module.scss'
 
 interface PaymentGeneralInfoTabProps {
@@ -10,6 +11,12 @@ interface PaymentGeneralInfoTabProps {
     readonly payment: Winning
 }
 
+/**
+ * Shows winning metadata and the amount/status of each historical installment.
+ * @param props Formatted winning and its description/date presentation values.
+ * @returns General Info content, with a breakdown for multi-installment payments.
+ * @throws RangeError if a stored installment contains an invalid currency code.
+ */
 const PaymentGeneralInfoTab: FC<PaymentGeneralInfoTabProps> = (props: PaymentGeneralInfoTabProps) => (
     <div className={styles.tabPanelContent}>
         <div className={styles.infoItemFull}>
@@ -55,6 +62,23 @@ const PaymentGeneralInfoTab: FC<PaymentGeneralInfoTabProps> = (props: PaymentGen
                 </div>
             )}
         </div>
+        {props.payment.details.length > 1 && (
+            <div className={styles.infoItemFull}>
+                <span className={styles.label}>Installments</span>
+                {props.payment.details.map(installment => (
+                    <p key={installment.id} className={styles.value}>
+                        Installment
+                        {' '}
+                        {installment.installmentNumber}
+                        {': '}
+                        {formatCurrencyAmount(Number(installment.grossAmount), installment.currency)}
+                        {' — '}
+                        {installment.status.replaceAll('_', ' ')
+                            .toLowerCase()}
+                    </p>
+                ))}
+            </div>
+        )}
     </div>
 )
 
diff --git a/src/apps/wallet-admin/src/lib/models/WinningDetail.ts b/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
index 6432bff4d..6b1a9281a 100644
--- a/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
+++ b/src/apps/wallet-admin/src/lib/models/WinningDetail.ts
@@ -99,6 +99,8 @@ export interface WinningDetail {
     category: string
     title: string
     description: string
+    /** Gross member amount across current installments; absent on older Finance deployments. */
+    grossAmount?: number
     externalId: string
     attributes: {
         assignmentId?: number | string

From 12db9eb35905ec076e79dd47b87cee4c6acd61a1 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 16 Sep 2026 11:11:17 +1000
Subject: [PATCH 10/22] PM-6343 Align Sales search and filter controls

---
 src/apps/sales/README.md                 |  6 ++-
 src/apps/sales/src/SalesPage.module.scss | 11 +++--
 src/apps/sales/src/SalesPage.spec.tsx    | 11 +----
 src/apps/sales/src/SalesPage.tsx         | 60 ++++++++++++------------
 4 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/apps/sales/README.md b/src/apps/sales/README.md
index db6d1eb67..31ca74838 100644
--- a/src/apps/sales/README.md
+++ b/src/apps/sales/README.md
@@ -13,6 +13,8 @@ Report metadata determines every displayed column, including grouped Stage.
 Search and column substring filters apply on **Apply**; headers sort globally
 before server pagination. Changing a filter, sort or page size starts at page
 one. Clear resets filters and sorting. Null display values use an em dash.
+Search sales, Filter field and Contains use persistent labels above equal-height
+controls, aligned in the desktop filter row and stacked on mobile.
 The semantic HTML table provides keyboard sorting, `aria-sort`, and a focusable
 horizontal scroll region for wide reports; the shared Table component performs
 client sorting and is intentionally not used for this server-paginated report.
@@ -25,8 +27,8 @@ are explicit. `allData: false` warns that filters and totals cover only received
 rows, because Salesforce Analytics caps report details at 2,000 records.
 
 The app opts into scoped shared 2026 foundations, using Figtree headings, Nunito
-Sans body text, semantic color tokens, shared buttons, inputs and loading
-controls. Source design guidance:
+Sans body text, semantic color tokens, shared buttons and loading controls, and
+explicitly labelled native filter controls. Source design guidance:
 [Topcoder Design System — August 2026](https://www.figma.com/design/C2cA6508RhpjWJDp7MLKbO/Topcoder-Design-System---Aug-2026?node-id=1-54).
 
 Run `nvm use` in platform-ui before `yarn lint`, `LOGICAL_ENV=dev yarn run build`,
diff --git a/src/apps/sales/src/SalesPage.module.scss b/src/apps/sales/src/SalesPage.module.scss
index 80e29a24c..83de541e5 100644
--- a/src/apps/sales/src/SalesPage.module.scss
+++ b/src/apps/sales/src/SalesPage.module.scss
@@ -34,9 +34,12 @@
 .panelHeader h2 { font-size: $tc-2026-h4-size; line-height: 32px; }
 .panelHeader p { margin-top: 4px; color: $tc-2026-muted; }
 .filters { padding: 24px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; background: $tc-2026-canvas; }
-.search { flex: 1 1 220px; min-width: 160px; margin-bottom: 0; }
-.selectField { display: flex; flex-direction: column; gap: 8px; font-weight: 700; flex: 1 1 180px; }
-.selectField select, .pageControls select { background: $tc-2026-surface; border: 1px solid $tc-2026-border-strong; padding: 10px 12px; min-height: 40px; color: $tc-2026-body; font-weight: 400; max-width: 100%; }
+.filterField { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 160px; }
+.filterField label { font-size: 16px; line-height: 24px; font-weight: 700; }
+.filterField input, .filterField select, .pageControls select { background: $tc-2026-surface; border: 1px solid $tc-2026-border-strong; padding: 10px 12px; min-height: 40px; color: $tc-2026-body; font-weight: 400; max-width: 100%; }
+.filterField input, .filterField select { width: 100%; height: 48px; box-sizing: border-box; font-size: 16px; line-height: 24px; }
+.filterField input::placeholder { color: $tc-2026-muted; opacity: 1; }
+.filterField input:disabled { background: $tc-2026-border; cursor: not-allowed; }
 .filterActions { min-height: 48px; }
 .tableScroll { overflow-x: auto; width: 100%; }
 .table { width: 100%; border-collapse: collapse; text-align: left; }
@@ -68,6 +71,6 @@
     .headerActions { width: 100%; justify-content: space-between; }
     .panelHeader, .filters, .pagination { padding: 16px; }
     .panelHeader { align-items: flex-start; flex-direction: column; }
-    .search, .selectField { flex-basis: 100%; }
+    .filterField { flex-basis: 100%; }
     .error { align-items: flex-start; flex-direction: column; }
 }
diff --git a/src/apps/sales/src/SalesPage.spec.tsx b/src/apps/sales/src/SalesPage.spec.tsx
index 7cdb02112..df79be660 100644
--- a/src/apps/sales/src/SalesPage.spec.tsx
+++ b/src/apps/sales/src/SalesPage.spec.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
 import '@testing-library/jest-dom'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { ButtonHTMLAttributes, ChangeEvent, ReactNode } from 'react'
+import { ButtonHTMLAttributes, ReactNode } from 'react'
 
 import SalesPage from './SalesPage'
 import { SalesReport } from './sales.models'
@@ -19,15 +19,6 @@ jest.mock('~/libs/ui', () => ({
         </button>
     ),
     IconOutline: { RefreshIcon: () => <span /> },
-    InputText: (props: {
-        label: string; disabled?: boolean; name: string; value: string;
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void
-    }) => (
-        <label htmlFor={props.name}>
-            {props.label}
-            <input disabled={props.disabled} id={props.name} value={props.value} onChange={props.onChange} />
-        </label>
-    ),
     LoadingSpinner: (props: { message: string }) => <span>{props.message}</span>,
     PageTitle: (props: { children: ReactNode }) => <title>{props.children}</title>,
 }), { virtual: true })
diff --git a/src/apps/sales/src/SalesPage.tsx b/src/apps/sales/src/SalesPage.tsx
index 0756d1886..846bbe0fa 100644
--- a/src/apps/sales/src/SalesPage.tsx
+++ b/src/apps/sales/src/SalesPage.tsx
@@ -4,7 +4,7 @@
 /* eslint jsx-a11y/no-noninteractive-tabindex: ["error", { "roles": ["region"] }] */
 import { FC, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
 
-import { Button, IconOutline, InputText, LoadingSpinner, PageTitle } from '~/libs/ui'
+import { Button, IconOutline, LoadingSpinner, PageTitle } from '~/libs/ui'
 
 import { SalesQuery, SalesReport } from './sales.models'
 import { fetchSalesReport, salesErrorMessage } from './sales.service'
@@ -188,20 +188,21 @@ const SalesPage: FC = () => {
                 </div>
 
                 <form className={styles.filters} onSubmit={applyFilters}>
-                    <InputText
-                        classNameWrapper={styles.search}
-                        forceUpdateValue
-                        label='Search sales'
-                        maxLength={200}
-                        name='sales-search'
-                        onChange={event => setSearch(event.target.value)}
-                        placeholder='Search all report fields'
-                        tabIndex={0}
-                        type='text'
-                        value={search}
-                    />
-                    <label className={styles.selectField} htmlFor='sales-filter-column'>
-                        Filter field
+                    <div className={styles.filterField}>
+                        <label htmlFor='sales-search'>Search sales</label>
+                        <input
+                            id='sales-search'
+                            maxLength={200}
+                            name='sales-search'
+                            onChange={event => setSearch(event.target.value)}
+                            placeholder='Search all report fields'
+                            spellCheck={false}
+                            type='text'
+                            value={search}
+                        />
+                    </div>
+                    <div className={styles.filterField}>
+                        <label htmlFor='sales-filter-column'>Filter field</label>
                         <select
                             id='sales-filter-column'
                             onChange={event => setFilterColumn(event.target.value)}
@@ -212,20 +213,21 @@ const SalesPage: FC = () => {
                                 <option key={column.id} value={column.id}>{column.label}</option>
                             ))}
                         </select>
-                    </label>
-                    <InputText
-                        classNameWrapper={styles.search}
-                        disabled={!filterColumn}
-                        forceUpdateValue
-                        label='Contains'
-                        maxLength={200}
-                        name='sales-filter-value'
-                        onChange={event => setFilterValue(event.target.value)}
-                        placeholder='Filter value'
-                        tabIndex={0}
-                        type='text'
-                        value={filterValue}
-                    />
+                    </div>
+                    <div className={styles.filterField}>
+                        <label htmlFor='sales-filter-value'>Contains</label>
+                        <input
+                            disabled={!filterColumn}
+                            id='sales-filter-value'
+                            maxLength={200}
+                            name='sales-filter-value'
+                            onChange={event => setFilterValue(event.target.value)}
+                            placeholder='Filter value'
+                            spellCheck={false}
+                            type='text'
+                            value={filterValue}
+                        />
+                    </div>
                     <div className={styles.filterActions}>
                         <Button disabled={loading || !report} noCaps secondary type='submit'>Apply</Button>
                         <Button noCaps onClick={clearFilters} link>Clear</Button>

From e1e27ea7ef9cccbfb0f1f2df7a32c5d505c6e44b Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 16 Sep 2026 09:41:18 +0530
Subject: [PATCH 11/22] Fix: Platform UI bugs

---
 .../components/NavTabs/NavTabs.module.scss    |   6 +-
 .../AssistantsPage/AssistantsPage.module.scss |   4 +-
 .../TopScoutPage/TopScoutPage.module.scss     |  16 +-
 .../lead-intake/LeadIntakePage.module.scss    |  46 +-
 .../src/pages/lead-intake/LeadIntakePage.tsx  | 711 +++++++++---------
 5 files changed, 417 insertions(+), 366 deletions(-)

diff --git a/src/apps/customer-portal/src/lib/components/NavTabs/NavTabs.module.scss b/src/apps/customer-portal/src/lib/components/NavTabs/NavTabs.module.scss
index 4c396af43..acd112bbe 100644
--- a/src/apps/customer-portal/src/lib/components/NavTabs/NavTabs.module.scss
+++ b/src/apps/customer-portal/src/lib/components/NavTabs/NavTabs.module.scss
@@ -181,9 +181,9 @@
         display: none;
         left: 0;
         min-width: 220px;
-        padding: 8px 0;
+        padding: 4px 0;
         position: absolute;
-        top: calc(100% - 4px);
+        top: calc(100% - 1px);
         z-index: 120;
 
         li {
@@ -191,7 +191,7 @@
             font-weight: 400;
             line-height: 22px;
             margin-left: 0;
-            padding: 10px 16px;
+            padding: 2px 16px;
             white-space: nowrap;
 
             &:hover,
diff --git a/src/apps/customer-portal/src/pages/assistants/AssistantsPage/AssistantsPage.module.scss b/src/apps/customer-portal/src/pages/assistants/AssistantsPage/AssistantsPage.module.scss
index 978fa6505..f22620590 100644
--- a/src/apps/customer-portal/src/pages/assistants/AssistantsPage/AssistantsPage.module.scss
+++ b/src/apps/customer-portal/src/pages/assistants/AssistantsPage/AssistantsPage.module.scss
@@ -1,11 +1,13 @@
 @import '@libs/ui/styles/includes';
 
 .page {
+    box-sizing: border-box;
     color: #0a0a0a;
     display: flex;
     flex-direction: column;
     font-family: 'Nunito Sans', sans-serif;
-    padding: 8px 0 0;
+    min-height: calc(#{$content-height} - 180px);
+    padding: 8px 0 $sp-10;
 
     h1 {
         color: #151515;
diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/TopScoutPage.module.scss b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/TopScoutPage.module.scss
index 7f720e3ea..24f486234 100644
--- a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/TopScoutPage.module.scss
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/TopScoutPage.module.scss
@@ -3,11 +3,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap');
 
 .page {
+    box-sizing: border-box;
     color: $tc-2026-body;
     display: flex;
     flex-direction: column;
     font-family: $tc-2026-font-body;
-    padding: 8px 0 0;
+    min-height: calc(#{$content-height} - 180px);
+    padding: 8px 0 $sp-8;
 
     h1 {
         color: $tc-2026-ink;
@@ -34,34 +36,42 @@
 }
 
 .layout {
+    align-items: stretch;
     display: flex;
+    flex: 1 1 auto;
     gap: 16px;
-    height: 70vh;
+    height: calc(#{$content-height} - 320px);
     margin-top: 20px;
-    margin-bottom: 28px;
     min-height: 480px;
     width: 100%;
 
     @include ltesm {
         flex-direction: column;
         height: auto;
+        min-height: 560px;
     }
 }
 
 .sidebar {
+    display: flex;
     flex: 0 0 133px;
+    flex-direction: column;
     max-width: 133px;
+    min-height: 0;
 
     @include ltesm {
         flex: 0 0 auto;
         max-height: 160px;
         max-width: 100%;
+        min-height: 160px;
     }
 }
 
 .chatPanel {
     display: flex;
     flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
     min-width: 0;
     position: relative;
     width: 100%;
diff --git a/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.module.scss b/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.module.scss
index 24cf80c61..49cb5b894 100644
--- a/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.module.scss
+++ b/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.module.scss
@@ -9,19 +9,49 @@ $placeholder-color: #6F6F6F;
 $border-light: #E0E0E0;
 $brand-teal: #007D79;
 
-.pageOuter {
-    max-width: none;
+.pageContent {
+    overflow-x: clip;
+    padding-bottom: 0;
+    width: 100%;
+
+    > :global([class*='content-outer']) {
+        background-color: $tc-2026-canvas;
+        margin: 0;
+        max-width: none;
+        padding-bottom: 48px;
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 0;
+        width: 100%;
+    }
 }
 
 .pageInner {
     max-width: none;
+    padding: 0;
+    width: 100%;
 }
 
 .pageHeader {
-    @include substractPagePaddings;
     background: $brand-teal;
     margin-bottom: 24px;
-    padding: 48px $sp-8;
+    padding: 48px $sp-10;
+    width: 100%;
+
+    @include ltemd {
+        padding-left: $sp-6;
+        padding-right: $sp-6;
+    }
+
+    @include ltesm {
+        padding-left: $sp-4;
+        padding-right: $sp-4;
+    }
+}
+
+.pageBody {
+    padding: 0 $sp-8;
+    width: 100%;
 
     @include ltemd {
         padding-left: $sp-6;
@@ -42,7 +72,6 @@ $brand-teal: #007D79;
     letter-spacing: 0;
     line-height: $tc-2026-h2-line-height;
     margin: 0;
-    padding-left: $sp-8;
     text-transform: none;
 }
 
@@ -82,6 +111,7 @@ $brand-teal: #007D79;
 
 .section {
     background: $tc-2026-surface;
+    border: none;
     border-radius: $tc-2026-radius-lg;
     display: grid;
     gap: 16px;
@@ -189,7 +219,7 @@ $brand-teal: #007D79;
 }
 
 .selectInputPlaceholder :global([class*='textSelected']) {
-    color: $placeholder-color;
+    color: $placeholder-color !important;
 }
 
 .selectInputWrapper:not(.selectInputPlaceholder) :global([class*='textSelected']) {
@@ -204,6 +234,7 @@ $brand-teal: #007D79;
 .textareaField::placeholder {
     color: $placeholder-color;
     font-size: 16px;
+    opacity: 1;
 }
 
 .inputField:focus,
@@ -338,7 +369,8 @@ $brand-teal: #007D79;
     }
 
     :global([class*='__placeholder']) {
-        color: $placeholder-color;
+        color: $placeholder-color !important;
+        opacity: 1 !important;
     }
 
     :global([class*='__single-value']) {
diff --git a/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.tsx b/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.tsx
index 23639b0a7..14194f37d 100644
--- a/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.tsx
+++ b/src/apps/engagements/src/pages/lead-intake/LeadIntakePage.tsx
@@ -570,373 +570,380 @@ const LeadIntakePage: FC = () => {
     }, [])
 
     return (
-        <ContentLayout innerClass={styles.pageInner} outerClass={styles.pageOuter}>
+        <ContentLayout
+            contentClass={styles.pageContent}
+            isFluid
+            innerClass={styles.pageInner}
+            outerClass={styles.pageOuter}
+        >
             <header className={styles.pageHeader}>
                 <h2 className={styles.pageHeaderTitle}>Engagement Lead Intake</h2>
             </header>
 
-            <div className={styles.formContainer}>
-                {!submitted && (
-                    <div className={styles.intro}>
-                        <div className={styles.introTitle}>Submit an Engagement Requirement</div>
-                        <p className={styles.introText}>
-                            Use this form to share your Flexi-Talent resource requirement.
-                            No sign-in is required. A Talent Manager will review your submission
-                            and follow up using the work email provided.
-                        </p>
-                    </div>
-                )}
-
-                {submitted && (
-                    <div className={styles.successCard}>
-                        <div className={styles.successIconWrap}>
-                            <IconOutline.CheckCircleIcon className={styles.successIcon} />
-                        </div>
-                        <h4 className={styles.successTitle}>Thank you for your submission!</h4>
-                        <p className={styles.successText}>
-                            Your engagement requirement has been received. A Talent Manager
-                            will review it and contact you at the email address provided.
-                        </p>
-                        <Button
-                            className={styles.primaryButton}
-                            customRadius
-                            label='Back to homepage'
-                            noCaps
-                            onClick={handleBackToHomepage}
-                            primary
-                            type='button'
-                        />
-                    </div>
-                )}
-
-                {submitError && (
-                    <div className={`${styles.notice} ${styles.noticeError}`}>
-                        <IconOutline.ExclamationIcon className={styles.noticeIcon} />
-                        <div>
-                            <p className={styles.noticeTitle}>Submission failed</p>
-                            <p className={styles.noticeText}>{submitError}</p>
+            <div className={styles.pageBody}>
+                <div className={styles.formContainer}>
+                    {!submitted && (
+                        <div className={styles.intro}>
+                            <div className={styles.introTitle}>Submit an Engagement Requirement</div>
+                            <p className={styles.introText}>
+                                Use this form to share your Flexi-Talent resource requirement.
+                                No sign-in is required. A Talent Manager will review your submission
+                                and follow up using the work email provided.
+                            </p>
                         </div>
-                    </div>
-                )}
-
-                {!submitted && (
-                    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-                        <section className={styles.section}>
-                            <h5 className={styles.sectionTitle}>1. Contact & Account</h5>
-                            <div className={styles.fieldGrid}>
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Example: john.doe@wipro.com',
-                                        label: 'Work Email Address',
-                                        required: true,
-                                    }}
-                                    name='workEmail'
-                                    type='email'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Examples: ABC Bank, XYZ Telecom',
-                                        label: 'Account / Customer Name',
-                                        required: true,
-                                    }}
-                                    name='accountName'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Examples: APMEA, AMERICAS1, Chief Operating Office',
-                                        label: 'Strategic Market Unit (SMU)',
-                                        required: true,
-                                    }}
-                                    name='smu'
-                                />
-                            </div>
-                        </section>
-
-                        <section className={styles.section}>
-                            <h5 className={styles.sectionTitle}>2. Role Requirements</h5>
-                            <div className={styles.fieldGrid}>
-                                <LeadIntakeSelectField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Select the commercial model for this requirement.',
-                                        label: 'Engagement Model',
-                                        required: true,
-                                    }}
-                                    name='engagementModel'
-                                    options={[
-                                        { label: 'Time & Material (T&M)', value: 'TIME_AND_MATERIAL' },
-                                        { label: 'Fixed Price Project (FPP)', value: 'FIXED_PRICE' },
-                                    ]}
-                                    placeholder='Select model'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Examples: Full Stack Developer, Product Manager, QA Engineer',
-                                        label: 'Role Title',
-                                        required: true,
-                                    }}
-                                    name='roleTitle'
-                                />
-                                <LeadIntakeTextareaField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Describe key responsibilities, deliverables, and expected outcomes.',
-                                        label: 'Detailed Job Description',
-                                        required: true,
-                                    }}
-                                    name='jobDescription'
-                                />
-                                <LeadIntakeSkillsField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Type to search and select the mandatory skills for this role.',
-                                        label: 'Required Skills',
-                                        required: true,
-                                    }}
-                                    onSkillsChange={handleSkillsChange}
-                                />
-                                <LeadIntakeSelectField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Select the required level of experience.',
-                                        label: 'Experience Level Required',
-                                        required: true,
-                                    }}
-                                    name='experienceLevel'
-                                    options={[
-                                        { label: 'Junior', value: 'JUNIOR' },
-                                        { label: 'Mid-Level', value: 'MID' },
-                                        { label: 'Senior', value: 'SENIOR' },
-                                        { label: 'Lead / Architect', value: 'LEAD_ARCHITECT' },
-                                    ]}
-                                    placeholder='Select level'
-                                />
-                                <LeadIntakeNumberField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Specify the minimum years of relevant experience required.',
-                                        label: 'Minimum Years of Experience',
-                                        required: true,
-                                    }}
-                                    name='minYearsExperience'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Optional. Examples: Banking, Insurance, Healthcare, Telecom',
-                                        label: 'Industry Domain Experience',
-                                    }}
-                                    name='industryDomain'
-                                />
-                            </div>
-                        </section>
-
-                        <section className={styles.section}>
-                            <h5 className={styles.sectionTitle}>3. Engagement Details</h5>
-                            <div className={styles.fieldGrid}>
-                                <LeadIntakeNumberField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Indicate the number of resources required for this role.',
-                                        label: 'Number of Resources Required',
-                                        required: true,
-                                    }}
-                                    name='resourcesRequired'
-                                />
-                                <LeadIntakeDateField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Indicate the date on which the resource(s) are expected to begin.',
-                                        label: 'Preferred Start Date',
-                                        required: true,
-                                    }}
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Examples: 3 months, 6 months, 12 months, ongoing',
-                                        label: 'Engagement Duration',
-                                        required: true,
-                                    }}
-                                    name='engagementDuration'
-                                />
-                                <LeadIntakeNumberField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Specify the expected daily working hours for the resource.',
-                                        label: 'Expected Working Hours per Day',
-                                        required: true,
-                                    }}
-                                    name='workingHoursPerDay'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Examples: IST, GMT, CET, PST, EST or ANY',
-                                        label: 'Time Zone Requirement',
-                                        required: true,
-                                    }}
-                                    name='timeZoneRequirement'
-                                />
-                                <LeadIntakeRadioGroupField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Topcoder Flexi-Talent resources operate remotely.',
-                                        label: 'Remote Work Acceptance',
-                                        required: true,
-                                    }}
-                                    name='remoteWorkAccepted'
-                                    options={[
-                                        { label: 'Yes', value: 'yes' },
-                                        { label: 'No', value: 'no' },
-                                    ]}
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Optional. Examples: India-only, EU-preferred or ANY',
-                                        label: 'Work Location Restrictions',
-                                    }}
-                                    name='workLocationRestrictions'
-                                />
-                            </div>
-                        </section>
+                    )}
 
-                        <section className={styles.section}>
-                            <h5 className={styles.sectionTitle}>4. Commercial & Priority</h5>
-                            <div className={styles.fieldGrid}>
-                                <LeadIntakeSelectField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Select the currency for the approved hourly bill rate.',
-                                        label: 'Bill Rate Currency',
-                                        required: true,
-                                    }}
-                                    name='billRateCurrency'
-                                    options={[
-                                        { label: 'USD', value: 'USD' },
-                                        { label: 'GBP', value: 'GBP' },
-                                        { label: 'EUR', value: 'EUR' },
-                                        { label: 'INR', value: 'INR' },
-                                        { label: 'Other', value: 'OTHER' },
-                                    ]}
-                                    placeholder='Select currency'
-                                />
-                                <LeadIntakeTextField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Hourly amount, e.g. 100',
-                                        label: 'Approved Client Bill Rate (Hourly)',
-                                        required: true,
-                                    }}
-                                    name='billRateAmount'
-                                />
-                                <LeadIntakeSelectField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: 'Select how urgently this requirement needs to be fulfilled.',
-                                        label: 'Priority of Request',
-                                        required: true,
-                                    }}
-                                    name='priority'
-                                    options={[
-                                        { label: 'Critical — immediate fulfilment required', value: 'CRITICAL' },
-                                        { label: 'High', value: 'HIGH' },
-                                        { label: 'Medium', value: 'MEDIUM' },
-                                        { label: 'Low', value: 'LOW' },
-                                    ]}
-                                    placeholder='Select priority'
-                                />
-                                <LeadIntakeTextareaField
-                                    control={control}
-                                    disabled={submitting}
-                                    errors={errors}
-                                    fieldProps={{
-                                        hint: [
-                                            'Optional. Examples: client-facing experience,',
-                                            'overlap hours, certifications, languages',
-                                        ].join(' '),
-                                        label: 'Additional Requirements or Constraints',
-                                    }}
-                                    name='additionalRequirements'
-                                />
+                    {submitted && (
+                        <div className={styles.successCard}>
+                            <div className={styles.successIconWrap}>
+                                <IconOutline.CheckCircleIcon className={styles.successIcon} />
                             </div>
-                        </section>
-
-                        <div className={styles.submitSection}>
+                            <h4 className={styles.successTitle}>Thank you for your submission!</h4>
+                            <p className={styles.successText}>
+                                Your engagement requirement has been received. A Talent Manager
+                                will review it and contact you at the email address provided.
+                            </p>
                             <Button
                                 className={styles.primaryButton}
                                 customRadius
-                                disabled={submitting || (hasSubmitted && !formIsValid)}
-                                label={(
-                                    <span className={styles.submitLabel}>
-                                        {submitting && (
-                                            <LoadingSpinner className={styles.submitSpinner} inline />
-                                        )}
-                                        Submit Requirement
-                                    </span>
-                                )}
+                                label='Back to homepage'
                                 noCaps
+                                onClick={handleBackToHomepage}
                                 primary
-                                type='submit'
-                            />
-                            <Button
-                                className={styles.secondaryButton}
-                                customRadius
-                                disabled={submitting}
-                                label='Clear'
-                                noCaps
-                                onClick={handleClear}
-                                secondary
                                 type='button'
                             />
                         </div>
-                    </form>
-                )}
+                    )}
+
+                    {submitError && (
+                        <div className={`${styles.notice} ${styles.noticeError}`}>
+                            <IconOutline.ExclamationIcon className={styles.noticeIcon} />
+                            <div>
+                                <p className={styles.noticeTitle}>Submission failed</p>
+                                <p className={styles.noticeText}>{submitError}</p>
+                            </div>
+                        </div>
+                    )}
+
+                    {!submitted && (
+                        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+                            <section className={styles.section}>
+                                <h5 className={styles.sectionTitle}>1. Contact & Account</h5>
+                                <div className={styles.fieldGrid}>
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Example: john.doe@wipro.com',
+                                            label: 'Work Email Address',
+                                            required: true,
+                                        }}
+                                        name='workEmail'
+                                        type='email'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Examples: ABC Bank, XYZ Telecom',
+                                            label: 'Account / Customer Name',
+                                            required: true,
+                                        }}
+                                        name='accountName'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Examples: APMEA, AMERICAS1, Chief Operating Office',
+                                            label: 'Strategic Market Unit (SMU)',
+                                            required: true,
+                                        }}
+                                        name='smu'
+                                    />
+                                </div>
+                            </section>
+
+                            <section className={styles.section}>
+                                <h5 className={styles.sectionTitle}>2. Role Requirements</h5>
+                                <div className={styles.fieldGrid}>
+                                    <LeadIntakeSelectField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Select the commercial model for this requirement.',
+                                            label: 'Engagement Model',
+                                            required: true,
+                                        }}
+                                        name='engagementModel'
+                                        options={[
+                                            { label: 'Time & Material (T&M)', value: 'TIME_AND_MATERIAL' },
+                                            { label: 'Fixed Price Project (FPP)', value: 'FIXED_PRICE' },
+                                        ]}
+                                        placeholder='Select model'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Examples: Full Stack Developer, Product Manager, QA Engineer',
+                                            label: 'Role Title',
+                                            required: true,
+                                        }}
+                                        name='roleTitle'
+                                    />
+                                    <LeadIntakeTextareaField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Describe key responsibilities, deliverables, and expected outcomes.',
+                                            label: 'Detailed Job Description',
+                                            required: true,
+                                        }}
+                                        name='jobDescription'
+                                    />
+                                    <LeadIntakeSkillsField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Type to search and select the mandatory skills for this role.',
+                                            label: 'Required Skills',
+                                            required: true,
+                                        }}
+                                        onSkillsChange={handleSkillsChange}
+                                    />
+                                    <LeadIntakeSelectField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Select the required level of experience.',
+                                            label: 'Experience Level Required',
+                                            required: true,
+                                        }}
+                                        name='experienceLevel'
+                                        options={[
+                                            { label: 'Junior', value: 'JUNIOR' },
+                                            { label: 'Mid-Level', value: 'MID' },
+                                            { label: 'Senior', value: 'SENIOR' },
+                                            { label: 'Lead / Architect', value: 'LEAD_ARCHITECT' },
+                                        ]}
+                                        placeholder='Select level'
+                                    />
+                                    <LeadIntakeNumberField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Specify the minimum years of relevant experience required.',
+                                            label: 'Minimum Years of Experience',
+                                            required: true,
+                                        }}
+                                        name='minYearsExperience'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Optional. Examples: Banking, Insurance, Healthcare, Telecom',
+                                            label: 'Industry Domain Experience',
+                                        }}
+                                        name='industryDomain'
+                                    />
+                                </div>
+                            </section>
+
+                            <section className={styles.section}>
+                                <h5 className={styles.sectionTitle}>3. Engagement Details</h5>
+                                <div className={styles.fieldGrid}>
+                                    <LeadIntakeNumberField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Indicate the number of resources required for this role.',
+                                            label: 'Number of Resources Required',
+                                            required: true,
+                                        }}
+                                        name='resourcesRequired'
+                                    />
+                                    <LeadIntakeDateField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Indicate the date on which the resource(s) are expected to begin.',
+                                            label: 'Preferred Start Date',
+                                            required: true,
+                                        }}
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Examples: 3 months, 6 months, 12 months, ongoing',
+                                            label: 'Engagement Duration',
+                                            required: true,
+                                        }}
+                                        name='engagementDuration'
+                                    />
+                                    <LeadIntakeNumberField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Specify the expected daily working hours for the resource.',
+                                            label: 'Expected Working Hours per Day',
+                                            required: true,
+                                        }}
+                                        name='workingHoursPerDay'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Examples: IST, GMT, CET, PST, EST or ANY',
+                                            label: 'Time Zone Requirement',
+                                            required: true,
+                                        }}
+                                        name='timeZoneRequirement'
+                                    />
+                                    <LeadIntakeRadioGroupField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Topcoder Flexi-Talent resources operate remotely.',
+                                            label: 'Remote Work Acceptance',
+                                            required: true,
+                                        }}
+                                        name='remoteWorkAccepted'
+                                        options={[
+                                            { label: 'Yes', value: 'yes' },
+                                            { label: 'No', value: 'no' },
+                                        ]}
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Optional. Examples: India-only, EU-preferred or ANY',
+                                            label: 'Work Location Restrictions',
+                                        }}
+                                        name='workLocationRestrictions'
+                                    />
+                                </div>
+                            </section>
+
+                            <section className={styles.section}>
+                                <h5 className={styles.sectionTitle}>4. Commercial & Priority</h5>
+                                <div className={styles.fieldGrid}>
+                                    <LeadIntakeSelectField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Select the currency for the approved hourly bill rate.',
+                                            label: 'Bill Rate Currency',
+                                            required: true,
+                                        }}
+                                        name='billRateCurrency'
+                                        options={[
+                                            { label: 'USD', value: 'USD' },
+                                            { label: 'GBP', value: 'GBP' },
+                                            { label: 'EUR', value: 'EUR' },
+                                            { label: 'INR', value: 'INR' },
+                                            { label: 'Other', value: 'OTHER' },
+                                        ]}
+                                        placeholder='Select currency'
+                                    />
+                                    <LeadIntakeTextField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Hourly amount, e.g. 100',
+                                            label: 'Approved Client Bill Rate (Hourly)',
+                                            required: true,
+                                        }}
+                                        name='billRateAmount'
+                                    />
+                                    <LeadIntakeSelectField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: 'Select how urgently this requirement needs to be fulfilled.',
+                                            label: 'Priority of Request',
+                                            required: true,
+                                        }}
+                                        name='priority'
+                                        options={[
+                                            { label: 'Critical — immediate fulfilment required', value: 'CRITICAL' },
+                                            { label: 'High', value: 'HIGH' },
+                                            { label: 'Medium', value: 'MEDIUM' },
+                                            { label: 'Low', value: 'LOW' },
+                                        ]}
+                                        placeholder='Select priority'
+                                    />
+                                    <LeadIntakeTextareaField
+                                        control={control}
+                                        disabled={submitting}
+                                        errors={errors}
+                                        fieldProps={{
+                                            hint: [
+                                                'Optional. Examples: client-facing experience,',
+                                                'overlap hours, certifications, languages',
+                                            ].join(' '),
+                                            label: 'Additional Requirements or Constraints',
+                                        }}
+                                        name='additionalRequirements'
+                                    />
+                                </div>
+                            </section>
+
+                            <div className={styles.submitSection}>
+                                <Button
+                                    className={styles.primaryButton}
+                                    customRadius
+                                    disabled={submitting || (hasSubmitted && !formIsValid)}
+                                    label={(
+                                        <span className={styles.submitLabel}>
+                                            {submitting && (
+                                                <LoadingSpinner className={styles.submitSpinner} inline />
+                                            )}
+                                            Submit Requirement
+                                        </span>
+                                    )}
+                                    noCaps
+                                    primary
+                                    type='submit'
+                                />
+                                <Button
+                                    className={styles.secondaryButton}
+                                    customRadius
+                                    disabled={submitting}
+                                    label='Clear'
+                                    noCaps
+                                    onClick={handleClear}
+                                    secondary
+                                    type='button'
+                                />
+                            </div>
+                        </form>
+                    )}
+                </div>
             </div>
         </ContentLayout>
     )

From 3b2232ce531df52c6fe93b748e6c9326fb68bd1a Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Wed, 16 Sep 2026 14:39:31 +1000
Subject: [PATCH 12/22] PM-6289 Restore Topgear URL submission flow in
 Opportunities

---
 src/apps/opportunities/README.md              |  27 ++-
 .../ChallengeSubmissionUpload.module.scss     |  39 +++-
 .../ChallengeSubmissionUpload.spec.tsx        | 130 +++++++++--
 .../components/ChallengeSubmissionUpload.tsx  | 203 +++++++++++-------
 src/config/environments/default.env.ts        |  11 +
 .../environments/global-config.model.ts       |   2 +
 6 files changed, 304 insertions(+), 108 deletions(-)

diff --git a/src/apps/opportunities/README.md b/src/apps/opportunities/README.md
index aeb59b0ac..80d7e264a 100644
--- a/src/apps/opportunities/README.md
+++ b/src/apps/opportunities/README.md
@@ -464,8 +464,17 @@ storage, so pending DMZ and quarantined files cannot be downloaded. Work
 Manager's case-insensitive `submission_type=url` challenge
 metadata selects the URL experience; every other value, including missing or
 malformed metadata, retains the standard ZIP experience. URL submissions
-require a confirmed absolute HTTP(S) link and send that link directly to
-`POST /v6/submissions` without invoking Filestack. ZIP submissions accept one
+reuse community-app's Topgear flow and exact Wipro instructions, submission
+warning, customer-deliverable note, and Service Now (SNOW) support guidance in
+Opportunities-styled cards. Members enter a Wipro SharePoint deliverable link,
+click **Set URL**, accept the declaration, and submit. Editing a confirmed link
+clears its confirmation and acceptance. URL validation requires an absolute
+HTTP(S) link with a deliverable path on `wipro365.sharepoint.com`,
+`wipro365-my.sharepoint.com`, or `wipro365-my.sharepoint.com.mcas.ms`, with no
+embedded credentials or nonstandard port. Deployments can override these exact
+hosts with the pipe-separated `REACT_APP_TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS`
+setting, matching community-app's allowlist configuration. URL submissions send
+the confirmed link directly to `POST /v6/submissions` without invoking Filestack. ZIP submissions accept one
 `.zip` archive up to 500MB and report live upload progress. The browser uploads
 the archive to Filestack's S3 endpoint using the environment's canonical
 submissions DMZ bucket, then sends the resulting storage URL to the same Review
@@ -475,14 +484,14 @@ member's registration before submission. The active phase selects `CONTEST_SUBMI
 authoritative for registration, phase, winner, submission-limit, and file
 validation. Design shows the four expected inner deliverables, while
 Development, Marathon Match, and Quality Assurance direct members to their
-Requirements content in ZIP mode; URL mode replaces file-specific guidance
-with link accessibility reminders. Successful submissions expose the created
+Requirements content in ZIP mode. Successful submissions expose the created
 submission ID and refresh challenge and member submission counts without
-leaving the confirmation state. The declaration opens the public Topcoder
-Terms of Use in a new tab. While either request is active, the detail tabs and
-every form action that would unmount the submission are disabled. The explicit
-cancel control remains available, aborts its request, clears the selected file
-or URL, and then unlocks normal navigation.
+leaving the confirmation state. ZIP mode's declaration opens the public Topcoder
+Terms of Use; URL mode preserves the exact TopGear declaration and opens
+community-app's TopGear terms and conditions URL in a new tab. While either
+request is active, the detail tabs and every form action that would unmount the
+submission are disabled. The explicit cancel control remains available, aborts
+its request, clears the selected file or URL, and then unlocks normal navigation.
 Marathon Match attempts fall back to Review submission, virus-scan, and scoring
 lifecycle fields when test metadata is absent, preserving truthful Failed, In
 progress, and completed states. A superseded scorer's `CANCELLED` status is shown
diff --git a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.module.scss b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.module.scss
index b901af63a..2a56f887e 100644
--- a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.module.scss
+++ b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.module.scss
@@ -59,6 +59,42 @@
     gap: 16px;
 }
 
+.urlFlow {
+    .columns {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .leftPanel {
+        display: flex;
+    }
+
+    .actions {
+        justify-content: flex-end;
+    }
+}
+
+.submissionInstructions {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    ol {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin: 0;
+        padding-left: 20px;
+    }
+}
+
+.submissionWarning {
+    font-weight: 700;
+
+    span {
+        color: #c1294f;
+    }
+}
+
 .infoCard,
 .mainPanel {
     background: #fff;
@@ -577,7 +613,8 @@
 }
 
 @media (max-width: 900px) {
-    .columns {
+    .columns,
+    .urlFlow .columns {
         grid-template-columns: 1fr;
     }
 
diff --git a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.spec.tsx b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.spec.tsx
index e352141a9..b0be02056 100644
--- a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.spec.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.spec.tsx
@@ -25,7 +25,17 @@ import {
 const mockRecordAnalyticsEvent = jest.fn()
 
 jest.mock('~/config', () => ({
-    EnvironmentConfig: { URLS: { TERMS_OF_USE: 'https://www.example.com/terms' } },
+    EnvironmentConfig: {
+        TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS: [
+            'wipro365.sharepoint.com',
+            'wipro365-my.sharepoint.com',
+            'wipro365-my.sharepoint.com.mcas.ms',
+        ],
+        URLS: {
+            TERMS_OF_USE: 'https://www.example.com/terms',
+            TOPGEAR_TERMS: 'https://topgear.topcoder.com/challenges/terms/detail/f1d8cca9-ac24-473c-998d-02f499a829cb',
+        },
+    },
 }), { virtual: true })
 jest.mock('~/libs/cms', () => ({
     getSafeCmsLink: jest.fn(),
@@ -144,26 +154,92 @@ describe('ChallengeSubmissionUpload', () => {
             .toBe('The ZIP file must be 500MB or smaller.')
     })
 
-    it('accepts only trimmed absolute HTTP or HTTPS submission URLs', () => {
+    it('requires an absolute HTTP or HTTPS submission URL', () => {
         expect(validateChallengeSubmissionUrl(''))
             .toBe('Enter the URL to your submission.')
         expect(validateChallengeSubmissionUrl('deliverables.example.com/result'))
             .toBe('Enter a valid submission URL.')
         expect(validateChallengeSubmissionUrl('ftp://deliverables.example.com/result'))
             .toBe('Enter a URL beginning with http:// or https://.')
-        expect(validateChallengeSubmissionUrl('  https://deliverables.example.com/result  '))
+        expect(validateChallengeSubmissionUrl('  https://wipro365.sharepoint.com/result  '))
             .toBeUndefined()
     })
 
-    it('renders metadata-selected URL guidance without the ZIP picker', () => {
+    it.each([
+        'https://wipro365.sharepoint.com/:f:/r/sites/project/deliverables?download=1',
+        'https://wipro365-my.sharepoint.com/personal/member/result.docx',
+        'https://wipro365-my.sharepoint.com.mcas.ms/personal/member/result.docx',
+        'http://wipro365.sharepoint.com/sites/project/result',
+        '  https://WIPRO365.SHAREPOINT.COM/sites/project/Work%20Summary.docx  ',
+    ])('accepts legacy Wipro SharePoint deliverable links: %s', url => {
+        expect(validateChallengeSubmissionUrl(url))
+            .toBeUndefined()
+    })
+
+    it.each([
+        'https://files.example.com/result',
+        'https://wipro365.sharepoint.com',
+        'https://wipro365.sharepoint.com/?result=1',
+        'https://wipro365.sharepoint.com.evil.example/result',
+        'https://wipro365Xsharepoint.com/result',
+        'https://wipro365.sharepoint.com@evil.example/result',
+        'https://user:password@wipro365.sharepoint.com/result',
+        'https://wipro365.sharepoint.com:8443/result',
+    ])('rejects links outside the allowed SharePoint deliverables: %s', url => {
+        expect(validateChallengeSubmissionUrl(url))
+            .toBe('Ensure that you submit a valid Wipro SharePoint link only. '
+                + 'The link should point to the outcome/deliverable of the challenge and should reflect the work done. '
+                + 'Please check the challenge submission guidelines.')
+    })
+
+    it.each([
+        'Development', 'Design', 'Data Science', 'Quality Assurance',
+    ])('renders the exact Topgear guidance for a metadata-selected URL %s challenge', track => {
         renderUpload(challengeFixture({
             metadata: [{ name: ' SUBMISSION_TYPE ', value: ' URL ' }],
+            track: { name: track },
         }))
 
-        expect(screen.getByText('Submit the URL to your solution as described in the requirements.'))
+        expect(screen.getByText('Enter the URL to your submission.'))
             .toBeInTheDocument()
-        expect(screen.getByRole('heading', { name: 'Required Link' }))
+        expect(screen.getByRole('heading', { name: 'Steps for Submission:' }))
             .toBeInTheDocument()
+        expect(screen.getAllByRole('listitem')
+            .map(item => item.textContent))
+            .toEqual([
+                'Upload the outcome/asset/deliverable of the challenge to the repository (Wipro SharePoint folder) '
+                + 'as specified by the project team/challenge creator.',
+                'Copy the link of the outcome/asset/deliverable that was uploaded. '
+                + 'Enter this link in the text box and click on “SET URL”.',
+                'Please check the acceptance/confirmation box at the bottom left corner.',
+                'Click on the ‘Submit’ option at the bottom right.',
+            ])
+        expect(screen.getByText('Do not submit any irrelevant links').parentElement)
+            .toHaveTextContent('Ensure that the submission link always reflects the outcome '
+                + 'that was delivered as part of the challenge. Do not submit any irrelevant links '
+                + 'as the submission link is proof of the work done.')
+        expect(screen.getByText(/Note: All deliverables\/outcomes/))
+            .toHaveTextContent('Note: All deliverables/outcomes should be uploaded to the Wipro SharePoint '
+                + 'directory ONLY. For work done directly on customer environment and involving a customer '
+                + 'SharePoint/drive/folder link, create a word document and include a brief summary of the work '
+                + 'done and list the deliverables/assets created along with the link to the customer '
+                + 'SharePoint/drive/folder link and upload the word document '
+                + 'to a Wipro SharePoint folder. And submit the link to this Word document as the submission link.')
+        expect(screen.getByText(/If you are having trouble with the submission/))
+            .toHaveTextContent('If you are having trouble with the submission or have any queries, '
+                + 'please raise a Service Now (SNOW) ticket under the TopGear category.')
+        const termsLink = screen.getByRole('link', { name: 'TopGear terms and conditions' })
+        expect(termsLink)
+            .toHaveAttribute(
+                'href',
+                'https://topgear.topcoder.com/challenges/terms/detail/f1d8cca9-ac24-473c-998d-02f499a829cb',
+            )
+        expect(termsLink)
+            .toHaveAttribute('target', '_blank')
+        expect(termsLink.parentElement)
+            .toHaveTextContent('Submitting your link means you hereby agree to the TopGear terms and conditions '
+                + 'and to the extent your submission wins a TopGear challenge, you hereby agree to assign, grant, '
+                + 'and transfer to TopGear all right and title to the Winning Submission.')
         expect(screen.getByLabelText(/Submission URL/))
             .toHaveAttribute('type', 'url')
         expect(screen.getByRole('button', { name: 'Set URL' }))
@@ -172,8 +248,21 @@ describe('ChallengeSubmissionUpload', () => {
             .not.toBeInTheDocument()
         expect(screen.queryByText('Drop your file(s) here or'))
             .not.toBeInTheDocument()
-        expect(screen.getByText('Link directly to your challenge deliverable'))
+        expect(screen.queryByRole('heading', { name: 'Submission tips' }))
+            .not.toBeInTheDocument()
+        expect(screen.queryByRole('button', { name: 'Topcoder Support' }))
+            .not.toBeInTheDocument()
+    })
+
+    it('keeps the file picker and Topcoder declaration for an explicit ZIP challenge', () => {
+        renderUpload(challengeFixture({ metadata: [{ name: 'submission_type', value: 'zip' }] }))
+
+        expect(screen.getByLabelText(/Upload File/))
             .toBeInTheDocument()
+        expect(screen.getByRole('link', { name: 'Topcoder Terms of Use' }))
+            .toHaveAttribute('href', 'https://www.example.com/terms')
+        expect(screen.queryByLabelText(/Submission URL/))
+            .not.toBeInTheDocument()
     })
 
     it('validates and reconfirms an edited URL before enabling its declaration', () => {
@@ -192,19 +281,28 @@ describe('ChallengeSubmissionUpload', () => {
         expect(agreement)
             .toBeDisabled()
 
-        fireEvent.change(urlInput, { target: { value: '  https://files.example.com/result  ' } })
+        fireEvent.change(urlInput, { target: { value: 'https://files.example.com/result' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
+        expect(screen.getByRole('alert'))
+            .toHaveTextContent('Ensure that you submit a valid Wipro SharePoint link only.')
+        expect(agreement)
+            .toBeDisabled()
+        expect(screen.getByRole('button', { name: 'Submit' }))
+            .toBeDisabled()
+
+        fireEvent.change(urlInput, { target: { value: '  https://wipro365.sharepoint.com/result  ' } })
         fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
         expect(screen.getByText('Ready to submit'))
             .toBeInTheDocument()
-        expect(screen.getByText('https://files.example.com/result'))
+        expect(screen.getByText('https://wipro365.sharepoint.com/result'))
             .toBeInTheDocument()
         expect(urlInput)
-            .toHaveValue('https://files.example.com/result')
+            .toHaveValue('https://wipro365.sharepoint.com/result')
         expect(agreement)
             .not.toBeDisabled()
 
         fireEvent.click(agreement)
-        fireEvent.change(urlInput, { target: { value: 'https://files.example.com/revised' } })
+        fireEvent.change(urlInput, { target: { value: 'https://wipro365.sharepoint.com/revised' } })
         expect(screen.queryByText('Ready to submit'))
             .not.toBeInTheDocument()
         expect(agreement)
@@ -222,7 +320,7 @@ describe('ChallengeSubmissionUpload', () => {
         }))
 
         fireEvent.change(screen.getByLabelText(/Submission URL/), {
-            target: { value: '  https://files.example.com/result  ' },
+            target: { value: '  https://wipro365.sharepoint.com/result  ' },
         })
         fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
         fireEvent.click(screen.getByRole('checkbox', { name: 'I understand and agree' }))
@@ -233,7 +331,7 @@ describe('ChallengeSubmissionUpload', () => {
                 'challenge-id',
                 '123',
                 'CONTEST_SUBMISSION',
-                'https://files.example.com/result',
+                'https://wipro365.sharepoint.com/result',
                 expect.any(AbortSignal),
             ))
         expect(mockedCreateSubmission)
@@ -263,7 +361,7 @@ describe('ChallengeSubmissionUpload', () => {
 
         const urlInput = screen.getByLabelText(/Submission URL/)
         fireEvent.change(urlInput, {
-            target: { value: 'https://files.example.com/result' },
+            target: { value: 'https://wipro365.sharepoint.com/result' },
         })
         fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
         fireEvent.click(screen.getByRole('checkbox', { name: 'I understand and agree' }))
@@ -286,7 +384,7 @@ describe('ChallengeSubmissionUpload', () => {
         )
 
         fireEvent.change(screen.getByLabelText(/Submission URL/), {
-            target: { value: 'https://files.example.com/result' },
+            target: { value: 'https://wipro365.sharepoint.com/result' },
         })
         fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
         fireEvent.click(screen.getByRole('checkbox', { name: 'I understand and agree' }))
@@ -312,7 +410,7 @@ describe('ChallengeSubmissionUpload', () => {
         )
 
         fireEvent.change(screen.getByLabelText(/Submission URL/), {
-            target: { value: 'https://files.example.com/result' },
+            target: { value: 'https://wipro365.sharepoint.com/result' },
         })
         fireEvent.click(screen.getByRole('button', { name: 'Set URL' }))
         fireEvent.click(screen.getByRole('checkbox', { name: 'I understand and agree' }))
diff --git a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.tsx b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.tsx
index 7fbbd7aac..94f96e08d 100644
--- a/src/apps/opportunities/src/components/ChallengeSubmissionUpload.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSubmissionUpload.tsx
@@ -29,6 +29,9 @@ import { challengeCatalogKey } from './challenge-card.utils'
 import styles from './ChallengeSubmissionUpload.module.scss'
 
 const MAX_SUBMISSION_BYTES = 500 * 1024 * 1024
+const WIPRO_SUBMISSION_LINK_GUIDANCE = 'Ensure that you submit a valid Wipro SharePoint link only. '
+    + 'The link should point to the outcome/deliverable of the challenge and should reflect the work done. '
+    + 'Please check the challenge submission guidelines.'
 
 interface ChallengeSubmissionUploadProps {
     challenge: ChallengeOpportunity
@@ -80,10 +83,12 @@ export function validateChallengeSubmissionFile(file: File): string | undefined
 }
 
 /**
- * Validates a member-authored challenge deliverable URL.
+ * Validates a member-authored deliverable URL against community-app's Topgear rules.
+ * The Opportunities URL form requires HTTP(S), an allowed Wipro SharePoint host,
+ * and a deliverable path, without embedded credentials or a nonstandard port.
  *
  * @param value URL entered in the submission form.
- * @returns member-facing validation failure, or undefined for an absolute HTTP(S) URL.
+ * @returns member-facing validation failure, or undefined for an allowed deliverable URL.
  * @throws Does not throw; malformed URLs are returned as validation failures.
  */
 export function validateChallengeSubmissionUrl(value: string): string | undefined {
@@ -92,11 +97,16 @@ export function validateChallengeSubmissionUrl(value: string): string | undefine
 
     try {
         const url = new URL(normalizedValue)
-        if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+        if (!/^https?:\/\//i.test(normalizedValue)) {
             return 'Enter a URL beginning with http:// or https://.'
         }
 
         if (!url.hostname) return 'Enter a valid submission URL.'
+        if (!EnvironmentConfig.TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS.includes(url.hostname)
+            || url.username || url.password || url.port || url.pathname === '/') {
+            return WIPRO_SUBMISSION_LINK_GUIDANCE
+        }
+
         return undefined
     } catch {
         return 'Enter a valid submission URL.'
@@ -115,11 +125,11 @@ function formatFileSize(bytes: number): string {
 }
 
 /**
- * Renders the Figma upload, progress, declaration, and confirmation states inside
- * the active My Submissions challenge tab.
+ * Renders ZIP uploads or the Topgear URL submission flow inside My Submissions,
+ * using Opportunities styling and the corresponding instructions and declaration.
  *
  * @param props challenge identity, member identity, navigation, legal, support, and cache callbacks.
- * @returns accessible DMZ-to-Review-API submission workflow.
+ * @returns accessible ZIP-to-DMZ or direct-URL Review API submission workflow.
  * @throws Does not throw; upload and clipboard failures are rendered or toasted in place.
  */
 export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = props => {
@@ -270,8 +280,8 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
     }
 
     /**
-     * Revalidates challenge registration, uploads the accepted archive, and advances
-     * to the immutable confirmation state.
+     * Revalidates challenge registration, uploads the accepted archive or submits
+     * the confirmed URL, and advances to the immutable confirmation state.
      *
      * @returns promise settled after the Review API response and cache refresh callback.
      * @throws Does not throw; request failures restore the ready state with an error message.
@@ -355,7 +365,7 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
     }
 
     return (
-        <div className={styles.uploadFlow}>
+        <div className={classNames(styles.uploadFlow, { [styles.urlFlow]: urlMode })}>
             <header className={styles.header}>
                 <div>
                     <button
@@ -370,7 +380,7 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                 </div>
                 <p>
                     {urlMode
-                        ? 'Submit the URL to your solution as described in the requirements.'
+                        ? 'Enter the URL to your submission.'
                         : 'Upload your solution files as described in the requirements.'}
                 </p>
             </header>
@@ -378,14 +388,46 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                 <aside className={styles.leftPanel}>
                     <section className={styles.infoCard}>
                         <h3>
-                            <IconOutline.DocumentAddIcon aria-hidden='true' />
-                            {urlMode ? 'Required Link' : 'Required Files'}
+                            {urlMode
+                                ? <IconOutline.LinkIcon aria-hidden='true' />
+                                : <IconOutline.DocumentAddIcon aria-hidden='true' />}
+                            {urlMode ? 'Steps for Submission:' : 'Required Files'}
                         </h3>
                         {urlMode ? (
-                            <p>
-                                Provide a direct link to the solution requested in the Requirements tab and keep it
-                                accessible throughout review.
-                            </p>
+                            <div className={styles.submissionInstructions}>
+                                <ol>
+                                    <li>
+                                        Upload the outcome/asset/deliverable of the challenge to the repository
+                                        {' ('}
+                                        <strong>Wipro SharePoint folder</strong>
+                                        ) as specified by the project team/challenge creator.
+                                    </li>
+                                    <li>
+                                        Copy the link of the outcome/asset/deliverable that was uploaded.
+                                        Enter this link in the text box and click on “SET URL”.
+                                    </li>
+                                    <li>Please check the acceptance/confirmation box at the bottom left corner.</li>
+                                    <li>Click on the ‘Submit’ option at the bottom right.</li>
+                                </ol>
+                                <p className={styles.submissionWarning}>
+                                    Ensure that the submission link always reflects the outcome
+                                    that was delivered as part of the challenge.
+                                    {' '}
+                                    <span>Do not submit any irrelevant links</span>
+                                    {' '}
+                                    as the submission link is proof of the work done.
+                                </p>
+                                <p>
+                                    Note: All deliverables/outcomes should be uploaded to the Wipro SharePoint directory
+                                    {' '}
+                                    <strong>ONLY</strong>
+                                    . For work done directly on customer environment and involving a customer
+                                    SharePoint/drive/folder link, create a word document and include a brief summary
+                                    of the work done and list the deliverables/assets created along with the link to the
+                                    customer SharePoint/drive/folder link and upload the word document to a Wipro
+                                    SharePoint folder. And submit the link to this Word document as the submission link.
+                                </p>
+                            </div>
                         ) : designChallenge ? (
                             <ul className={styles.requiredFiles}>
                                 <li>
@@ -421,66 +463,52 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                             <IconOutline.ArrowRightIcon aria-hidden='true' />
                         </button>
                     </section>
-                    <section className={styles.infoCard}>
-                        <h3>
-                            <IconOutline.BadgeCheckIcon aria-hidden='true' />
-                            Submission tips
-                        </h3>
-                        <ul className={styles.tips}>
-                            {urlMode ? (
-                                <>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Link directly to your challenge deliverable
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Use a link that challenge reviewers can access
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Keep access available throughout review
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Follow all challenge submission guidelines
-                                    </li>
-                                </>
-                            ) : (
-                                <>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Upload a single ZIP file only
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Do not password protect the files
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Include all files as per guidelines
-                                    </li>
-                                    <li>
-                                        <IconOutline.SunIcon aria-hidden='true' />
-                                        Keep your handle out of your files and file names
-                                    </li>
-                                </>
-                            )}
-                        </ul>
-                    </section>
+                    {!urlMode && (
+                        <section className={styles.infoCard}>
+                            <h3>
+                                <IconOutline.BadgeCheckIcon aria-hidden='true' />
+                                Submission tips
+                            </h3>
+                            <ul className={styles.tips}>
+                                <li>
+                                    <IconOutline.SunIcon aria-hidden='true' />
+                                    Upload a single ZIP file only
+                                </li>
+                                <li>
+                                    <IconOutline.SunIcon aria-hidden='true' />
+                                    Do not password protect the files
+                                </li>
+                                <li>
+                                    <IconOutline.SunIcon aria-hidden='true' />
+                                    Include all files as per guidelines
+                                </li>
+                                <li>
+                                    <IconOutline.SunIcon aria-hidden='true' />
+                                    Keep your handle out of your files and file names
+                                </li>
+                            </ul>
+                        </section>
+                    )}
                     <section className={styles.infoCard}>
                         <h3>
                             <IconOutline.QuestionMarkCircleIcon aria-hidden='true' />
                             Need help?
                         </h3>
-                        <p>
-                            Having issues with submitting your solution? To get assistance contact
-                            {' '}
-                            <button className={styles.inlineButton} onClick={props.onContactSupport} type='button'>
-                                Topcoder Support
-                            </button>
-                            .
-                        </p>
+                        {urlMode ? (
+                            <p>
+                                If you are having trouble with the submission or have any queries, please raise a
+                                Service Now (SNOW) ticket under the TopGear category.
+                            </p>
+                        ) : (
+                            <p>
+                                Having issues with submitting your solution? To get assistance contact
+                                {' '}
+                                <button className={styles.inlineButton} onClick={props.onContactSupport} type='button'>
+                                    Topcoder Support
+                                </button>
+                                .
+                            </p>
+                        )}
                     </section>
                 </aside>
                 <section className={classNames(styles.mainPanel, {
@@ -537,7 +565,8 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                                             disabled={uploading}
                                             id='challenge-submission-url'
                                             onChange={changeUrl}
-                                            placeholder='https://example.com/your-solution'
+                                            placeholder='URL'
+                                            required
                                             type='url'
                                             value={urlInput}
                                         />
@@ -551,7 +580,7 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                                         </button>
                                     </div>
                                     <small id='challenge-submission-url-help'>
-                                        Enter an absolute URL beginning with http:// or https://.
+                                        {WIPRO_SUBMISSION_LINK_GUIDANCE}
                                     </small>
                                     {error && (
                                         <p className={styles.error} id='challenge-submission-url-error' role='alert'>
@@ -663,19 +692,29 @@ export const ChallengeSubmissionUpload: FC<ChallengeSubmissionUploadProps> = pro
                                     {' '}
                                     <a
                                         className={styles.inlineButton}
-                                        href={EnvironmentConfig.URLS.TERMS_OF_USE}
-                                        rel='noreferrer'
+                                        href={urlMode
+                                            ? EnvironmentConfig.URLS.TOPGEAR_TERMS
+                                            : EnvironmentConfig.URLS.TERMS_OF_USE}
+                                        rel='noreferrer noopener'
                                         target='_blank'
                                     >
-                                        Topcoder Terms of Use
+                                        {urlMode ? 'TopGear terms and conditions' : 'Topcoder Terms of Use'}
                                     </a>
                                     {' '}
-                                    {urlMode
-                                        ? 'and to the extent your linked solution wins a Topcoder competition, '
-                                        : 'and to the extent your uploaded file wins a Topcoder competition, '}
-                                    you hereby assign, grant and transfer and agree to assign, grant and transfer to
-                                    Topcoder all right and title in and to the Winning Submission (as further described
-                                    in the terms of use).
+                                    {urlMode ? (
+                                        <>
+                                            and to the extent your submission wins a TopGear challenge,
+                                            you hereby agree to assign, grant, and transfer to TopGear all right
+                                            and title to the Winning Submission.
+                                        </>
+                                    ) : (
+                                        <>
+                                            and to the extent your uploaded file wins a Topcoder competition,
+                                            you hereby assign, grant and transfer and agree to assign, grant and
+                                            transfer to Topcoder all right and title in and to the Winning Submission
+                                            (as further described in the terms of use).
+                                        </>
+                                    )}
                                 </p>
                             </div>
                             <label className={styles.agreement}>
diff --git a/src/config/environments/default.env.ts b/src/config/environments/default.env.ts
index 618992730..1e8dfe88b 100644
--- a/src/config/environments/default.env.ts
+++ b/src/config/environments/default.env.ts
@@ -212,11 +212,22 @@ export const URLS = {
     ACCOUNT_SETTINGS: `https://account-settings.${TC_DOMAIN}/#account`,
     CHALLENGES_PAGE: `${TOPCODER_URL}/challenges`,
     TERMS_OF_USE: 'https://www.topcoder.com/community/how-it-works/terms/',
+    TOPGEAR_TERMS: 'https://topgear.topcoder.com/challenges/terms/detail/f1d8cca9-ac24-473c-998d-02f499a829cb',
     UNIVERSAL_NAV: `https://uni-nav.${TC_DOMAIN}/v1/tc-universal-nav.js`,
     USER_PROFILE: `https://profiles.${TC_DOMAIN}`,
     WORK_APP: `https://work.${TC_DOMAIN}`,
 }
 
+// Preserve community-app's pipe-separated Topgear submission host allowlist.
+export const TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS: string[] = getReactEnv<string>(
+    'TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS',
+    'wipro365.sharepoint.com|wipro365-my.sharepoint.com|wipro365-my.sharepoint.com.mcas.ms',
+)
+    .split('|')
+    .map(domain => domain.trim()
+        .toLowerCase())
+    .filter(Boolean)
+
 export const MEMBER_VERIFY_LOOKER = getReactEnv<number>(
     'MEMBER_VERIFY_LOOKER',
     3322,
diff --git a/src/config/environments/global-config.model.ts b/src/config/environments/global-config.model.ts
index 9f62ad7b3..b2602afe5 100644
--- a/src/config/environments/global-config.model.ts
+++ b/src/config/environments/global-config.model.ts
@@ -62,10 +62,12 @@ export interface GlobalConfig {
         USER_PROFILE: string
         ACCOUNT_SETTINGS: string
         TERMS_OF_USE: string
+        TOPGEAR_TERMS: string
         UNIVERSAL_NAV: string
         CHALLENGES_PAGE: string
         WORK_APP: string
     }
+    TOPGEAR_ALLOWED_SUBMISSIONS_DOMAINS: string[]
     TERMS_URL?: string
     NDA_TERMS_URL?: string
     DEFAULT_NDA_UUID: string

From 6561907feea4afd0fa340c6aa0f527ddc1a42dcb Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Wed, 16 Sep 2026 09:31:56 +0300
Subject: [PATCH 13/22] chat recovery on timeouts

---
 .../ChatThread/ChatThread.module.scss         | 22 ++++++
 .../components/ChatThread/ChatThread.tsx      | 51 +++++++++++-
 .../assistants/TopScoutPage/lib/index.ts      |  2 +
 .../TopScoutPage/lib/stream-watchdog.ts       | 76 ++++++++++++++++++
 .../TopScoutPage/lib/use-stream-recovery.ts   | 79 +++++++++++++++++++
 5 files changed, 227 insertions(+), 3 deletions(-)
 create mode 100644 src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/stream-watchdog.ts
 create mode 100644 src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/use-stream-recovery.ts

diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.module.scss b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.module.scss
index c10d7f7c0..9a9b0e94b 100644
--- a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.module.scss
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.module.scss
@@ -232,6 +232,28 @@
     white-space: pre;
 }
 
+.recoveryBanner {
+    align-items: center;
+    background-color: $tc-2026-canvas;
+    border-top: 1px solid $tc-2026-border;
+    color: $tc-2026-muted;
+    display: flex;
+    flex: 0 0 auto;
+    font-size: 12px;
+    gap: 8px;
+    padding: 8px $sp-4;
+}
+
+.recoveryBannerError {
+    color: $tc-2026-danger;
+}
+
+.recoveryDots {
+    .thinkingDot {
+        background-color: currentcolor;
+    }
+}
+
 .composer {
     align-items: flex-end;
     border-top: 1px solid $tc-2026-border;
diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.tsx b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.tsx
index e1d29bc6a..192af4878 100644
--- a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.tsx
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/components/ChatThread/ChatThread.tsx
@@ -1,5 +1,5 @@
 import { DefaultChatTransport, UIMessage } from 'ai'
-import { FC, useCallback, useMemo } from 'react'
+import { FC, useCallback, useEffect, useMemo, useRef } from 'react'
 import classNames from 'classnames'
 
 import { useChat } from '@ai-sdk/react'
@@ -13,7 +13,13 @@ import {
 import { useAISDKRuntime } from '@assistant-ui/react-ai-sdk'
 import { IconOutline } from '~/libs/ui'
 
-import { authFetch, CHAT_ENDPOINT_URL } from '../../lib'
+import {
+    authFetch,
+    CHAT_ENDPOINT_URL,
+    useStreamRecovery,
+    UseStreamRecoveryResult,
+    withStallWatchdog,
+} from '../../lib'
 
 import MarkdownText from './MarkdownText'
 import styles from './ChatThread.module.scss'
@@ -151,7 +157,7 @@ const ChatThread: FC<ChatThreadProps> = props => {
                     thread: props.threadId,
                 },
             },
-            fetch: authFetch,
+            fetch: withStallWatchdog(authFetch),
         }),
         [props.resourceId, props.threadId],
     )
@@ -167,6 +173,32 @@ const ChatThread: FC<ChatThreadProps> = props => {
         transport,
     })
 
+    const handleRecovered = useCallback((messages: UIMessage[]) => {
+        chat.setMessages(messages)
+        props.onThreadActivity?.()
+    }, [chat, props.onThreadActivity])
+
+    const { startRecovery, status: recoveryStatus }: UseStreamRecoveryResult
+        = useStreamRecovery(props.threadId, handleRecovered)
+
+    // `useChat`'s `onError` fires once per request, so re-wiring it here as
+    // a plain option risks missing an error that lands before this render
+    // commits. Watching `chat.error` instead catches it regardless of when
+    // it's set, and `handledErrorRef` stops a still-set error from
+    // re-triggering recovery on unrelated re-renders.
+    const handledErrorRef = useRef<Error | undefined>(undefined)
+
+    useEffect(() => {
+        if (chat.error && chat.error !== handledErrorRef.current) {
+            handledErrorRef.current = chat.error
+            // Mirrors `toChatUIMessages`' empty-parts filter, so this lines
+            // up with what the recovered thread history will look like.
+            const baselineMessageCount = chat.messages.filter(message => message.parts.length > 0).length
+
+            startRecovery(baselineMessageCount)
+        }
+    }, [chat.error, chat.messages, startRecovery])
+
     const runtime = useAISDKRuntime(chat)
 
     return (
@@ -204,6 +236,19 @@ const ChatThread: FC<ChatThreadProps> = props => {
                     />
                 </ThreadPrimitive.Viewport>
 
+                {recoveryStatus === 'recovering' && (
+                    <div className={styles.recoveryBanner}>
+                        <ThinkingDots className={styles.recoveryDots} />
+                        Still working on that — reconnecting to fetch the response…
+                    </div>
+                )}
+
+                {recoveryStatus === 'timed-out' && (
+                    <div className={classNames(styles.recoveryBanner, styles.recoveryBannerError)}>
+                        This is taking longer than expected. Refresh the page to check whether a response arrived.
+                    </div>
+                )}
+
                 <ComposerPrimitive.Root className={styles.composer}>
                     <ComposerPrimitive.Input
                         className={styles.input}
diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/index.ts b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/index.ts
index 2c1b1b5b5..be95a5e2b 100644
--- a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/index.ts
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/index.ts
@@ -3,3 +3,5 @@ export * from './chat.service'
 export * from './constants'
 export * from './convert-messages'
 export * from './models'
+export * from './stream-watchdog'
+export * from './use-stream-recovery'
diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/stream-watchdog.ts b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/stream-watchdog.ts
new file mode 100644
index 000000000..cfa2c234d
--- /dev/null
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/stream-watchdog.ts
@@ -0,0 +1,76 @@
+// The chat SSE stream can die without a proper HTTP error — an idle
+// intermediary (ALB, proxy) between the browser and tc-ai-api can reset a
+// quiet connection (e.g. mid tool-call, before any token has streamed) with
+// no status code at all. `fetch`'s reader then just never resolves again,
+// so `useChat` sits in "running" state forever with nothing on screen.
+//
+// tc-ai-api's chatRoute sends a heartbeat comment every 15s specifically to
+// avoid that, but this watchdog is the client-side backstop: if no bytes
+// (heartbeat or real data) arrive within `stallTimeoutMs`, the response
+// stream is force-errored so `useChat`'s onError fires and recovery can run.
+const DEFAULT_STALL_TIMEOUT_MS = 40_000
+
+export function withStallWatchdog(
+    baseFetch: typeof fetch,
+    stallTimeoutMs: number = DEFAULT_STALL_TIMEOUT_MS,
+): typeof fetch {
+    return async (input, init) => {
+        const response = await baseFetch(input, init)
+
+        if (!response.body) {
+            return response
+        }
+
+        const reader = response.body.getReader()
+
+        const watchedBody = new ReadableStream<Uint8Array>({
+            cancel(reason: unknown) {
+                return reader.cancel(reason)
+            },
+            start(controller: ReadableStreamDefaultController<Uint8Array>) {
+                let timeoutId: ReturnType<typeof setTimeout>
+
+                function clearWatchdog(): void {
+                    clearTimeout(timeoutId)
+                }
+
+                function armWatchdog(): void {
+                    clearWatchdog()
+                    timeoutId = setTimeout(() => {
+                        reader.cancel('TopScout stream stalled')
+                            .catch(() => undefined)
+                        controller.error(new Error('TopScout response stalled — no data received in time'))
+                    }, stallTimeoutMs)
+                }
+
+                function pump(): void {
+                    reader.read()
+                        .then(({ done, value }: ReadableStreamReadResult<Uint8Array>) => {
+                            if (done) {
+                                clearWatchdog()
+                                controller.close()
+                                return
+                            }
+
+                            armWatchdog()
+                            controller.enqueue(value)
+                            pump()
+                        })
+                        .catch((error: unknown) => {
+                            clearWatchdog()
+                            controller.error(error)
+                        })
+                }
+
+                armWatchdog()
+                pump()
+            },
+        })
+
+        return new Response(watchedBody, {
+            headers: response.headers,
+            status: response.status,
+            statusText: response.statusText,
+        })
+    }
+}
diff --git a/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/use-stream-recovery.ts b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/use-stream-recovery.ts
new file mode 100644
index 000000000..3a0b30f37
--- /dev/null
+++ b/src/apps/customer-portal/src/pages/assistants/TopScoutPage/lib/use-stream-recovery.ts
@@ -0,0 +1,79 @@
+import { useCallback, useRef, useState } from 'react'
+import { UIMessage } from 'ai'
+
+import { fetchChatThreadMessages } from './chat.service'
+import { toChatUIMessages } from './convert-messages'
+
+const POLL_INTERVAL_MS = 4_000
+const POLL_TIMEOUT_MS = 120_000
+
+export type StreamRecoveryStatus = 'idle' | 'recovering' | 'timed-out'
+
+export interface UseStreamRecoveryResult {
+    status: StreamRecoveryStatus
+    startRecovery: (baselineMessageCount: number) => void
+}
+
+/**
+ * Mastra only persists the assistant's message once its run finishes, so
+ * when the live SSE connection dies mid-response (see stream-watchdog.ts),
+ * the recovered answer isn't available yet either — it lands in Postgres
+ * whenever the backend run completes, independent of the client connection.
+ * This polls thread history until that happens instead of leaving the user
+ * to keep manually refreshing.
+ *
+ * `baselineMessageCount` is the number of non-empty messages the caller
+ * already has rendered (mirroring toChatUIMessages' empty-parts filter) —
+ * recovery is considered resolved once the fetched thread has more than
+ * that many messages and the newest one is from the assistant.
+ */
+export function useStreamRecovery(
+    threadId: string,
+    onRecovered: (messages: UIMessage[]) => void,
+): UseStreamRecoveryResult {
+    const [status, setStatus] = useState<StreamRecoveryStatus>('idle')
+    const runIdRef = useRef(0)
+
+    const startRecovery = useCallback((baselineMessageCount: number) => {
+        runIdRef.current += 1
+        const runId = runIdRef.current
+        const deadline = Date.now() + POLL_TIMEOUT_MS
+        setStatus('recovering')
+
+        async function poll(): Promise<void> {
+            if (runIdRef.current !== runId) {
+                return
+            }
+
+            try {
+                const stored = await fetchChatThreadMessages(threadId)
+                const messages = toChatUIMessages(stored)
+
+                if (runIdRef.current !== runId) {
+                    return
+                }
+
+                const newest = messages[messages.length - 1]
+
+                if (messages.length > baselineMessageCount && newest?.role === 'assistant') {
+                    setStatus('idle')
+                    onRecovered(messages)
+                    return
+                }
+            } catch (error) {
+                console.error('TopScout recovery poll failed:', (error as Error).message)
+            }
+
+            if (Date.now() >= deadline) {
+                setStatus('timed-out')
+                return
+            }
+
+            setTimeout(poll, POLL_INTERVAL_MS)
+        }
+
+        poll()
+    }, [onRecovered, threadId])
+
+    return { startRecovery, status }
+}

From 1d7f90d3bfebb31e825c5ec4462b97559ebbcab0 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 16 Sep 2026 22:19:06 +0530
Subject: [PATCH 14/22] PM-6087 Display review config to submitters

---
 .../components/ChallengeSidebar.module.scss   |   2 +-
 .../src/components/ChallengeSidebar.spec.tsx  |  24 ++--
 .../src/components/ChallengeSidebar.tsx       |  53 +++------
 .../src/pages/ChallengeDetailsPage.tsx        |   5 +-
 .../src/utils/ai-review-config.utils.ts       |   8 ++
 .../src/lib/assets/icons/icon-shuffle.svg     |   3 +
 .../ChallengeLinks/ChallengeLinks.module.scss |   7 +-
 .../ChallengeLinks/ChallengeLinks.tsx         |  14 ++-
 .../ChallengePhaseInfo/ChallengePhaseInfo.tsx |  72 +++++++++++-
 .../review/src/lib/models/AiReview.model.ts   |   5 +-
 src/apps/review/src/lib/styles/index.scss     |   2 +-
 .../ChallengeDetailsPage.module.scss          |   6 +-
 .../ChallengeDetailsPage.tsx                  |  11 +-
 .../lib/utils/ai-review-config.utils.spec.ts  |  57 ++++++++++
 .../lib/utils/ai-review-config.utils.ts       | 104 ++++++++++++++++++
 src/libs/shared/lib/utils/index.ts            |   1 +
 16 files changed, 310 insertions(+), 64 deletions(-)
 create mode 100644 src/apps/opportunities/src/utils/ai-review-config.utils.ts
 create mode 100644 src/apps/review/src/lib/assets/icons/icon-shuffle.svg
 create mode 100644 src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
 create mode 100644 src/libs/shared/lib/utils/ai-review-config.utils.ts

diff --git a/src/apps/opportunities/src/components/ChallengeSidebar.module.scss b/src/apps/opportunities/src/components/ChallengeSidebar.module.scss
index 8cddb12f0..fc50cc4cc 100644
--- a/src/apps/opportunities/src/components/ChallengeSidebar.module.scss
+++ b/src/apps/opportunities/src/components/ChallengeSidebar.module.scss
@@ -224,7 +224,7 @@
     }
 }
 
-.reviewStyleStatus {
+.reviewConfigStatus {
     color: #617178;
     margin: 0;
 }
diff --git a/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx b/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
index 60599feef..aa45bc697 100644
--- a/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
@@ -136,9 +136,18 @@ describe('ChallengeSidebar Review Style', () => {
         })
     })
 
-    it('shows manual review with the Figma explanation when no AI config exists', () => {
+    it('does not show review style for non-development challenges', () => {
         renderSidebar()
 
+        expect(screen.queryByRole('heading', { name: 'Review Style' }))
+            .not.toBeInTheDocument()
+    })
+
+    it('shows manual review when no AI config exists for development challenges', () => {
+        renderSidebar(undefined, developmentChallenge)
+
+        expect(screen.getByRole('heading', { name: 'Review Style' }))
+            .toBeInTheDocument()
         expect(screen.getByText('Manual'))
             .toBeInTheDocument()
         expect(screen.getByRole('button', { name: 'About Manual' }))
@@ -147,11 +156,6 @@ describe('ChallengeSidebar Review Style', () => {
             .toBeInTheDocument()
         expect(screen.queryByText(/Instant Review is/))
             .not.toBeInTheDocument()
-        const heading = screen.getByRole('heading', { name: 'Review Style' })
-        expect(heading.querySelector('img'))
-            .not.toBeNull()
-        expect(heading.querySelector('svg'))
-            .toBeNull()
     })
 
     it('shows AI-only review and the disabled Instant Review state', () => {
@@ -160,7 +164,7 @@ describe('ChallengeSidebar Review Style', () => {
             id: 'ai-only-config',
             instantReview: false,
             mode: 'AI_ONLY',
-        })
+        }, developmentChallenge)
 
         expect(screen.getByText('AI only'))
             .toBeInTheDocument()
@@ -178,7 +182,7 @@ describe('ChallengeSidebar Review Style', () => {
             id: 'ai-gating-config',
             instantReview: true,
             mode: 'AI_GATING',
-        })
+        }, developmentChallenge)
 
         expect(screen.getByText('AI Gating'))
             .toBeInTheDocument()
@@ -188,7 +192,7 @@ describe('ChallengeSidebar Review Style', () => {
             'AI performs a preliminary review, then the Community Review Board evaluates submissions that pass.',
         ))
             .toBeInTheDocument()
-        expect(screen.getByText('You will receive AI feedback during the submission phase'))
+        expect(screen.getByText('You will receive AI feedback during the submission phase.'))
             .toBeInTheDocument()
     })
 
@@ -240,7 +244,7 @@ describe('ChallengeSidebar Review Style', () => {
             .not.toBeNull()
     })
 
-    it('uses the dedicated Review App host and hides Review Style for Marathon Matches', () => {
+    it('uses the dedicated Review App host and hides review style for Marathon Matches', () => {
         renderSidebar(undefined, marathonChallenge)
 
         expect(screen.getByRole('link', { name: 'View Review App' }))
diff --git a/src/apps/opportunities/src/components/ChallengeSidebar.tsx b/src/apps/opportunities/src/components/ChallengeSidebar.tsx
index 5bab5cbf6..e6788fc81 100644
--- a/src/apps/opportunities/src/components/ChallengeSidebar.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSidebar.tsx
@@ -9,6 +9,12 @@ import {
     ChallengeOpportunity,
     ChallengeTerm,
 } from '../models'
+import { getChallengeTermsDetails } from '../services'
+import {
+    getInstantReviewStyleItem,
+    getReviewStyleModeItem,
+    hasAiReviewConfig,
+} from '../utils/ai-review-config.utils'
 import {
     challengeAllowsStockArt,
     challengeFileTypes,
@@ -33,7 +39,6 @@ import {
     QA_COMPETITION_TYPES_URL,
     USABLE_CODE_RULES_URL,
 } from '../utils/opportunity-learning.utils'
-import { getChallengeTermsDetails } from '../services'
 import programBanner from '../assets/ai-exponential-program.png'
 import sidebarArrowIcon from '../assets/sidebar-arrow.svg'
 import sidebarBookIcon from '../assets/sidebar-book.svg'
@@ -78,29 +83,8 @@ interface ReviewStyleSectionProps {
     unavailable?: boolean
 }
 
-interface ReviewStylePresentation {
-    label: string
-    tooltip: string
-}
-
-const MANUAL_REVIEW_STYLE: ReviewStylePresentation = {
-    label: 'Manual',
-    tooltip: 'Community Review Board performs a thorough review based on scorecards.',
-}
-
-const AI_REVIEW_STYLES: Record<ChallengeAiReviewConfig['mode'], ReviewStylePresentation> = {
-    AI_GATING: {
-        label: 'AI Gating',
-        tooltip: 'AI performs a preliminary review, then the Community Review Board evaluates submissions that pass.',
-    },
-    AI_ONLY: {
-        label: 'AI only',
-        tooltip: 'AI will perform a thorough review based on scorecards.',
-    },
-}
-
 /**
- * Renders one Figma review-style bullet and its accessible explanation.
+ * Renders one review-style bullet with an accessible tooltip.
  *
  * @param props member-facing label and tooltip copy.
  * @returns one review-style list item.
@@ -129,16 +113,14 @@ const ReviewStyleItem: FC<ReviewStyleItemProps> = props => (
 )
 
 /**
- * Renders the API-backed Review Style rows shared by every challenge type.
+ * Renders development-challenge review style above challenge terms.
  *
  * @param props AI review configuration and request state.
- * @returns Review Style heading with manual or AI-specific detail rows.
+ * @returns Review mode and instant review details.
  * @throws Does not throw.
  */
 const ReviewStyleSection: FC<ReviewStyleSectionProps> = props => {
-    const presentation = props.config
-        ? AI_REVIEW_STYLES[props.config.mode] ?? MANUAL_REVIEW_STYLE
-        : MANUAL_REVIEW_STYLE
+    const reviewModeItem = getReviewStyleModeItem(props.config)
 
     return (
         <div className={styles.infoSection}>
@@ -147,18 +129,15 @@ const ReviewStyleSection: FC<ReviewStyleSectionProps> = props => {
                 Review Style
             </h3>
             {props.loading
-                ? <p className={styles.reviewStyleStatus}>Loading review style…</p>
+                ? <p className={styles.reviewConfigStatus}>Loading review configuration…</p>
                 : props.unavailable
-                    ? <p className={styles.reviewStyleStatus}>Review style is unavailable.</p>
+                    ? <p className={styles.reviewConfigStatus}>Review configuration is unavailable.</p>
                     : (
                         <ul className={styles.reviewStyleList}>
-                            <ReviewStyleItem {...presentation} />
-                            {props.config && (
+                            <ReviewStyleItem {...reviewModeItem} />
+                            {hasAiReviewConfig(props.config) && (
                                 <ReviewStyleItem
-                                    label={`Instant Review is ${props.config.instantReview ? 'On' : 'Off'}`}
-                                    tooltip={props.config.instantReview
-                                        ? 'You will receive AI feedback during the submission phase'
-                                        : 'You will not receive AI feedback during the submission phase.'}
+                                    {...getInstantReviewStyleItem(props.config?.instantReview === true)}
                                 />
                             )}
                         </ul>
@@ -509,7 +488,7 @@ export const ChallengeSidebar: FC<ChallengeSidebarProps> = props => {
                         </div>
                     </>
                 )}
-                {!marathonMatch && (
+                {developmentChallenge && !marathonMatch && (
                     <ReviewStyleSection
                         config={props.aiReviewConfig}
                         loading={props.reviewStyleLoading}
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
index d14e07512..c4edcb4d1 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
@@ -369,8 +369,11 @@ export const ChallengeDetailsPage: FC = () => {
     )
     const challenge = challengeResponse.data
     const taskChallenge = isTaskChallenge(challenge)
+    const developmentChallenge = challenge
+        ? challengeCatalogKey(challenge.track) === 'development'
+        : false
     const aiReviewConfigResponse: SWRResponse<ChallengeAiReviewConfig | undefined, Error> = useSWR(
-        challengeId && profile && challenge && !isMarathonMatchChallenge(challenge)
+        challengeId && profile && challenge && developmentChallenge && !isMarathonMatchChallenge(challenge)
             ? ['opportunities:challenge-review-style', challengeId]
             : undefined,
         () => getChallengeAiReviewConfig(challengeId),
diff --git a/src/apps/opportunities/src/utils/ai-review-config.utils.ts b/src/apps/opportunities/src/utils/ai-review-config.utils.ts
new file mode 100644
index 000000000..72e242993
--- /dev/null
+++ b/src/apps/opportunities/src/utils/ai-review-config.utils.ts
@@ -0,0 +1,8 @@
+export {
+    formatInstantReviewLabel,
+    formatReviewModeLabel,
+    getInstantReviewStyleItem,
+    getReviewStyleModeItem,
+    hasAiReviewConfig,
+    isDevelopmentChallengeTrack,
+} from '../../../../libs/shared/lib/utils/ai-review-config.utils'
diff --git a/src/apps/review/src/lib/assets/icons/icon-shuffle.svg b/src/apps/review/src/lib/assets/icons/icon-shuffle.svg
new file mode 100644
index 000000000..358435155
--- /dev/null
+++ b/src/apps/review/src/lib/assets/icons/icon-shuffle.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4V1L8 5L12 9V6C15.31 6 18 8.69 18 12C18 13.01 17.75 13.97 17.3 14.8L18.76 16.26C19.54 15.03 20 13.57 20 12C20 7.58 16.42 4 12 4ZM12 18C8.69 18 6 15.31 6 12C6 10.99 6.25 10.03 6.7 9.2L5.24 7.74C4.46 8.97 4 10.43 4 12C4 16.42 7.58 20 12 20V23L16 19L12 15V18Z" fill="#00797A"/>
+</svg>
diff --git a/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.module.scss b/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.module.scss
index becea5cc3..beef925ac 100644
--- a/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.module.scss
+++ b/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.module.scss
@@ -1,8 +1,13 @@
 @import '@libs/ui/styles/includes';
 
 .container {
-    padding-top: $sp-6;
     display: flex;
     gap: $sp-4;
     flex-wrap: wrap;
+    align-items: center;
+}
+
+.headerActions {
+    flex-wrap: nowrap;
+    padding-top: 0;
 }
diff --git a/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.tsx b/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.tsx
index 118c76c3e..5de2af259 100644
--- a/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.tsx
+++ b/src/apps/review/src/lib/components/ChallengeLinks/ChallengeLinks.tsx
@@ -19,7 +19,10 @@ import { useRole, useRoleProps } from '../../hooks'
 
 import styles from './ChallengeLinks.module.scss'
 
+type ChallengeLinkAction = 'contactManager' | 'forum' | 'payments'
+
 interface Props {
+    actions?: ChallengeLinkAction[]
     className?: string
 }
 
@@ -47,9 +50,14 @@ export const ChallengeLinks: FC<Props> = (props: Props) => {
         [actionChallengeRole, myResources],
     )
 
+    const enabledActions = useMemo(
+        () => new Set<ChallengeLinkAction>(props.actions ?? ['contactManager', 'forum', 'payments']),
+        [props.actions],
+    )
+
     return (
         <div className={classNames(styles.container, props.className)}>
-            {canShowContactManagerButton && (
+            {enabledActions.has('contactManager') && canShowContactManagerButton && (
                 <button
                     type='button'
                     className='borderButton'
@@ -60,7 +68,7 @@ export const ChallengeLinks: FC<Props> = (props: Props) => {
                     Contact Manager
                 </button>
             )}
-            {challengeInfo && challengeInfo.discussionsUrl && (
+            {enabledActions.has('forum') && challengeInfo && challengeInfo.discussionsUrl && (
                 <a
                     href={challengeInfo?.discussionsUrl}
                     className='borderButton'
@@ -70,7 +78,7 @@ export const ChallengeLinks: FC<Props> = (props: Props) => {
                     Forum
                 </a>
             )}
-            {challengeInfo && canShowPaymentsButton && (
+            {enabledActions.has('payments') && challengeInfo && canShowPaymentsButton && (
                 <button
                     type='button'
                     className='borderButton'
diff --git a/src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx b/src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx
index 6104eec4b..359f0a1dd 100644
--- a/src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx
+++ b/src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx
@@ -7,15 +7,21 @@ import classNames from 'classnames'
 import moment from 'moment'
 
 import { EnvironmentConfig } from '~/config'
-
-import type { BackendPhase, BackendResource, ChallengeInfo, ReviewAppContextModel } from '../../models'
+import {
+    formatInstantReviewLabel,
+    formatReviewModeLabel,
+    hasAiReviewConfig,
+    isDevelopmentChallengeTrack,
+} from '~/libs/shared'
+
+import type { AiReviewConfig, BackendPhase, BackendResource, ChallengeInfo, ReviewAppContextModel } from '../../models'
 import type { WinningDetailDto } from '../../services'
 import { ChallengeDetailContext, ReviewAppContext } from '../../contexts'
 import { useRole, useRoleProps } from '../../hooks'
 import { fetchWinningsByExternalId } from '../../services'
 import { ProgressBar } from '../ProgressBar'
 import { SUBMITTER, TABLE_DATE_FORMAT } from '../../../config/index.config'
-import { formatDurationDate } from '../../utils'
+import { formatDurationDate, isMarathonMatchChallenge } from '../../utils'
 
 import styles from './ChallengePhaseInfo.module.scss'
 
@@ -61,11 +67,19 @@ const ROLE_TO_PRIZESET_TYPE: Record<string, string> = {
 }
 
 export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
-    const { myChallengeRoles }: useRoleProps = useRole()
+    const { actionChallengeRole, myChallengeRoles }: useRoleProps = useRole()
+    const isSubmitterView = actionChallengeRole === SUBMITTER
     const {
+        aiReviewConfig,
         challengeId,
+        isLoadingAiReviewConfig,
         resources,
-    }: { challengeId?: string; resources: BackendResource[] } = useContext(ChallengeDetailContext)
+    }: {
+        aiReviewConfig?: AiReviewConfig
+        challengeId?: string
+        isLoadingAiReviewConfig: boolean
+        resources: BackendResource[]
+    } = useContext(ChallengeDetailContext)
     const { loginUserInfo }: ReviewAppContextModel = useContext(ReviewAppContext)
     const [paymentAmount, setPaymentAmount] = useState<string | undefined>(undefined)
     const [hasPayment, setHasPayment] = useState(false)
@@ -82,6 +96,12 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
         return abbreviation === 'TSK' || name === 'task'
     }, [props.challengeInfo?.type?.abbreviation, props.challengeInfo?.type?.name])
 
+    const showReviewConfiguration = useMemo(
+        () => isDevelopmentChallengeTrack(props.challengeInfo?.track)
+            && !isMarathonMatchChallenge(props.challengeInfo),
+        [props.challengeInfo],
+    )
+
     const submitterHandle = useMemo(() => {
         if (!Array.isArray(resources)) return 'N/A'
 
@@ -299,7 +319,7 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
                 isTask,
                 variant,
             }),
-            createRolesItem(myChallengeRoles),
+            ...(!isSubmitterView ? [createRolesItem(myChallengeRoles)] : []),
             ...createTaskItems({
                 formattedStartDate,
                 formattedTaskPayment,
@@ -326,8 +346,18 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
                 reviewProgress: props.reviewProgress,
                 variant,
             }),
+            ...(isSubmitterView && showReviewConfiguration
+                ? createReviewConfigItems({
+                    aiReviewConfig,
+                    isLoading: isLoadingAiReviewConfig,
+                })
+                : []),
         ]
     }, [
+        actionChallengeRole,
+        aiReviewConfig,
+        isLoadingAiReviewConfig,
+        isSubmitterView,
         formattedNonTaskPayment,
         formattedStartDate,
         formattedTaskPayment,
@@ -342,6 +372,7 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
         props.reviewProgress,
         props.reviewInProgress,
         props.variant,
+        showReviewConfiguration,
         submitterHandle,
         walletUrl,
     ])
@@ -557,6 +588,35 @@ function createNonTaskItems(config: {
     return items
 }
 
+function createReviewConfigItems(config: {
+    aiReviewConfig?: AiReviewConfig
+    isLoading: boolean
+}): ChallengePhaseItem[] {
+    if (config.isLoading) {
+        return [{
+            icon: 'icon-ai-review',
+            title: 'Review Mode',
+            value: 'Loading…',
+        }]
+    }
+
+    const items: ChallengePhaseItem[] = [{
+        icon: 'icon-ai-review',
+        title: 'Review Mode',
+        value: formatReviewModeLabel(config.aiReviewConfig),
+    }]
+
+    if (hasAiReviewConfig(config.aiReviewConfig)) {
+        items.push({
+            icon: 'icon-shuffle',
+            title: 'Instant Review',
+            value: formatInstantReviewLabel(config.aiReviewConfig?.instantReview === true),
+        })
+    }
+
+    return items
+}
+
 function createActiveItems(config: {
     data: ChallengeInfo
     displayTimeLeft?: string
diff --git a/src/apps/review/src/lib/models/AiReview.model.ts b/src/apps/review/src/lib/models/AiReview.model.ts
index 90589b188..e15415ea3 100644
--- a/src/apps/review/src/lib/models/AiReview.model.ts
+++ b/src/apps/review/src/lib/models/AiReview.model.ts
@@ -1,3 +1,5 @@
+export type AiReviewMode = 'AI_GATING' | 'AI_ONLY'
+
 export type AiReviewDecisionStatus = 'PENDING' | 'PASSED' | 'FAILED' | 'ERROR' | 'HUMAN_OVERRIDE'
 
 export type AiReviewDecisionEscalationStatus = 'PENDING_APPROVAL' | 'APPROVED' | 'REJECTED'
@@ -34,7 +36,8 @@ export interface AiReviewConfig {
     challengeId: string
     version: number
     minPassingThreshold: number
-    mode: string
+    mode: AiReviewMode
+    instantReview: boolean
     autoFinalize: boolean
     formula?: Record<string, unknown>
     templateId?: string | null
diff --git a/src/apps/review/src/lib/styles/index.scss b/src/apps/review/src/lib/styles/index.scss
index 4d5786723..ee1b90ee7 100644
--- a/src/apps/review/src/lib/styles/index.scss
+++ b/src/apps/review/src/lib/styles/index.scss
@@ -3,7 +3,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-$icons: review appeal submission warning error event timer upload reopen 1st 2nd 3rd file handle dollar;
+$icons: review appeal submission warning error event timer upload reopen shuffle 1st 2nd 3rd file handle dollar ai-review;
 
 :root {
     --Yellow: #CF8835;
diff --git a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.module.scss b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.module.scss
index 413a19d80..deb29784e 100644
--- a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.module.scss
+++ b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.module.scss
@@ -107,12 +107,14 @@
 }
 
 .summary {
-    align-items: center;
-    justify-content: space-between;
+    align-items: flex-start;
     display: flex;
     flex-wrap: wrap;
+    gap: $sp-4;
+    justify-content: space-between;
 }
 
+
 .statusPillRow {
     margin-top: $sp-2;
     margin-bottom: $sp-2;
diff --git a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
index b939fb9bf..276bfcffe 100644
--- a/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
+++ b/src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx
@@ -64,6 +64,7 @@ import {
     pastReviewAssignmentsRouteId,
     rootRoute,
 } from '../../../config/routes.config'
+import challengeLinkStyles from '../../../lib/components/ChallengeLinks/ChallengeLinks.module.scss'
 
 import styles from './ChallengeDetailsPage.module.scss'
 
@@ -1795,6 +1796,12 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         ? formatChallengeStatusLabel(challengeInfo?.status)
         : undefined
     const shouldShowChallengeMetaRow = Boolean(statusLabel) || trackTypePills.length > 0
+    const shouldShowHeaderLinks = Boolean(
+        challengeInfo
+        && !hasChallengeScopedFetchError
+        && !isLoadingAnything
+        && canViewChallenge,
+    )
 
     return (
         <PageWrapper
@@ -1804,6 +1811,9 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
                 ? `${EnvironmentConfig.REVIEW.CHALLENGE_PAGE_URL}/${challengeId}`
                 : undefined}
             breadCrumb={breadCrumb}
+            rightHeader={shouldShowHeaderLinks ? (
+                <ChallengeLinks className={challengeLinkStyles.headerActions} />
+            ) : undefined}
         >
             {hasChallengeScopedFetchError ? (
                 <ChallengeScopedErrorState onRetry={retryChallengeScopedFetches} />
@@ -1840,7 +1850,6 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
                                 variant={isPastReviewDetail ? 'past' : 'active'}
                             />
                         )}
-                        <ChallengeLinks />
                     </div>
 
                     {(!phaseOrderingOptions.isTask || phaseOrderingOptions.isTopgearTask) ? (
diff --git a/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts b/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
new file mode 100644
index 000000000..fb6779e58
--- /dev/null
+++ b/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
@@ -0,0 +1,57 @@
+import {
+    formatInstantReviewLabel,
+    formatReviewModeLabel,
+    getInstantReviewStyleItem,
+    getReviewStyleModeItem,
+    hasAiReviewConfig,
+    isDevelopmentChallengeTrack,
+} from './ai-review-config.utils'
+
+describe('ai-review-config.utils', () => {
+    it('detects development tracks', () => {
+        expect(isDevelopmentChallengeTrack('Development'))
+            .toBe(true)
+        expect(isDevelopmentChallengeTrack({ name: 'Dev' }))
+            .toBe(true)
+        expect(isDevelopmentChallengeTrack('Design'))
+            .toBe(false)
+    })
+
+    it('formats review mode labels', () => {
+        expect(formatReviewModeLabel())
+            .toBe('Manual (Manual review)')
+        expect(formatReviewModeLabel({ instantReview: false, mode: 'AI_ONLY' }))
+            .toBe('AI only (AI review)')
+        expect(formatReviewModeLabel({ instantReview: true, mode: 'AI_GATING' }))
+            .toBe('AI Gating (AI review + Manual review)')
+    })
+
+    it('formats instant review and detects AI config presence', () => {
+        expect(formatInstantReviewLabel(true))
+            .toBe('ON')
+        expect(formatInstantReviewLabel(false))
+            .toBe('OFF')
+        expect(hasAiReviewConfig())
+            .toBe(false)
+        expect(hasAiReviewConfig({ instantReview: true, mode: 'AI_ONLY' }))
+            .toBe(true)
+    })
+
+    it('returns sidebar review-style list items with tooltips', () => {
+        expect(getReviewStyleModeItem())
+            .toEqual({
+                label: 'Manual',
+                tooltip: 'Community Review Board performs a thorough review based on scorecards.',
+            })
+        expect(getReviewStyleModeItem({ instantReview: false, mode: 'AI_ONLY' }))
+            .toEqual({
+                label: 'AI only',
+                tooltip: 'AI will perform a thorough review based on scorecards.',
+            })
+        expect(getInstantReviewStyleItem(false))
+            .toEqual({
+                label: 'Instant Review is Off',
+                tooltip: 'You will not receive AI feedback during the submission phase.',
+            })
+    })
+})
diff --git a/src/libs/shared/lib/utils/ai-review-config.utils.ts b/src/libs/shared/lib/utils/ai-review-config.utils.ts
new file mode 100644
index 000000000..7d6f6afa1
--- /dev/null
+++ b/src/libs/shared/lib/utils/ai-review-config.utils.ts
@@ -0,0 +1,104 @@
+export type AiReviewMode = 'AI_GATING' | 'AI_ONLY'
+
+export interface AiReviewConfigSummary {
+    instantReview: boolean
+    mode: AiReviewMode
+}
+
+export interface ReviewStyleListItem {
+    label: string
+    tooltip: string
+}
+
+function normalizeTrackKey(value?: string | { name?: string; track?: string }): string {
+    const raw = typeof value === 'string'
+        ? value
+        : value?.track ?? value?.name ?? ''
+
+    return raw
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, '')
+}
+
+/**
+ * Returns true when the challenge track identifies a development challenge.
+ */
+export function isDevelopmentChallengeTrack(
+    track?: string | { name?: string; track?: string },
+): boolean {
+    const key = normalizeTrackKey(track)
+
+    return key === 'development' || key === 'dev' || key === 'develop'
+}
+
+/**
+ * Returns the member-facing review mode label for challenge details surfaces.
+ */
+export function formatReviewModeLabel(config?: AiReviewConfigSummary): string {
+    if (!config) {
+        return 'Manual (Manual review)'
+    }
+
+    if (config.mode === 'AI_GATING') {
+        return 'AI Gating (AI review + Manual review)'
+    }
+
+    return 'AI only (AI review)'
+}
+
+/**
+ * Returns whether an AI review configuration is present for the challenge.
+ */
+export function hasAiReviewConfig(config?: AiReviewConfigSummary): boolean {
+    return !!config
+}
+
+/**
+ * Returns the ON/OFF label for instant review.
+ */
+export function formatInstantReviewLabel(instantReview: boolean): string {
+    return instantReview ? 'ON' : 'OFF'
+}
+
+/**
+ * Returns the sidebar review-mode bullet label and tooltip.
+ */
+export function getReviewStyleModeItem(config?: AiReviewConfigSummary): ReviewStyleListItem {
+    if (!config) {
+        return {
+            label: 'Manual',
+            tooltip: 'Community Review Board performs a thorough review based on scorecards.',
+        }
+    }
+
+    if (config.mode === 'AI_GATING') {
+        return {
+            label: 'AI Gating',
+            tooltip: 'AI performs a preliminary review, then the Community Review Board '
+                + 'evaluates submissions that pass.',
+        }
+    }
+
+    return {
+        label: 'AI only',
+        tooltip: 'AI will perform a thorough review based on scorecards.',
+    }
+}
+
+/**
+ * Returns the sidebar instant-review bullet label and tooltip.
+ */
+export function getInstantReviewStyleItem(instantReview: boolean): ReviewStyleListItem {
+    if (instantReview) {
+        return {
+            label: 'Instant Review is On',
+            tooltip: 'You will receive AI feedback during the submission phase.',
+        }
+    }
+
+    return {
+        label: 'Instant Review is Off',
+        tooltip: 'You will not receive AI feedback during the submission phase.',
+    }
+}
diff --git a/src/libs/shared/lib/utils/index.ts b/src/libs/shared/lib/utils/index.ts
index ebdebdc1b..babdf2ae8 100644
--- a/src/libs/shared/lib/utils/index.ts
+++ b/src/libs/shared/lib/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './ai-review-config.utils'
 export * from './copy-text-to-clipboard'
 export * from './files'
 export * from './generic-data-object.type'

From 03041ac2682d56ed84d11e4c58abf918b58d0b7a Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Thu, 17 Sep 2026 13:59:03 +1000
Subject: [PATCH 15/22] PM-6347 Search sales dynamically and remove Apply
 button

Search and column filter controls now update the report automatically after a
short debounce; pressing Enter still applies immediately.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/apps/sales/README.md              |  2 +-
 src/apps/sales/src/SalesPage.spec.tsx | 28 ++++++++++++++++-
 src/apps/sales/src/SalesPage.tsx      | 45 +++++++++++++++++++++------
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/apps/sales/README.md b/src/apps/sales/README.md
index 31ca74838..321b259e6 100644
--- a/src/apps/sales/README.md
+++ b/src/apps/sales/README.md
@@ -10,7 +10,7 @@ Salesforce credentials stay in `reports-api-v6`. No create, update, delete,
 export, machine credentials or direct Salesforce API calls exist in the UI.
 
 Report metadata determines every displayed column, including grouped Stage.
-Search and column substring filters apply on **Apply**; headers sort globally
+Search and column substring filters apply automatically as the user types (debounced); headers sort globally
 before server pagination. Changing a filter, sort or page size starts at page
 one. Clear resets filters and sorting. Null display values use an em dash.
 Search sales, Filter field and Contains use persistent labels above equal-height
diff --git a/src/apps/sales/src/SalesPage.spec.tsx b/src/apps/sales/src/SalesPage.spec.tsx
index df79be660..c51c352e3 100644
--- a/src/apps/sales/src/SalesPage.spec.tsx
+++ b/src/apps/sales/src/SalesPage.spec.tsx
@@ -53,7 +53,6 @@ describe('Sales page', () => {
         fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Example' } })
         fireEvent.change(screen.getByLabelText('Filter field'), { target: { value: 'NAME' } })
         fireEvent.change(screen.getByLabelText('Contains'), { target: { value: 'opportunity' } })
-        fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
         await waitFor(() => expect(fetchReport)
             .toHaveBeenLastCalledWith(expect.objectContaining({
                 filterColumn: 'NAME', filterValue: 'opportunity', page: 1, search: 'Example',
@@ -73,6 +72,33 @@ describe('Sales page', () => {
             .toHaveBeenLastCalledWith(expect.objectContaining({ page: 2 }), expect.any(AbortSignal)))
     })
 
+    it('searches as the user types after a short pause and applies immediately on enter', async () => {
+        jest.useFakeTimers()
+        render(<SalesPage />)
+        await act(async () => { await Promise.resolve() })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+        fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Tal' } })
+        fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Talent' } })
+        await act(async () => { jest.advanceTimersByTime(399) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+        await act(async () => { jest.advanceTimersByTime(1) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(2)
+        expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({ page: 1, search: 'Talent' }), expect.any(AbortSignal))
+        fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Talent search' } })
+        await act(async () => { fireEvent.submit(screen.getByLabelText('Search sales')) })
+        expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({ search: 'Talent search' }), expect.any(AbortSignal))
+        await act(async () => { jest.advanceTimersByTime(400) })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(3)
+        expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+        jest.useRealTimers()
+    })
+
     it('refreshes without losing filters and labels retained data after failure', async () => {
         render(<SalesPage />)
         await screen.findByText('Example opportunity')
diff --git a/src/apps/sales/src/SalesPage.tsx b/src/apps/sales/src/SalesPage.tsx
index 846bbe0fa..31b9cf32d 100644
--- a/src/apps/sales/src/SalesPage.tsx
+++ b/src/apps/sales/src/SalesPage.tsx
@@ -12,6 +12,33 @@ import styles from './SalesPage.module.scss'
 import './sales.scss'
 
 const initialQuery: SalesQuery = { page: 1, perPage: 25 }
+const filterDebounceMs = 400
+
+/**
+ * Merges search and column filter controls into the report query.
+ * @param current Active report query.
+ * @param search Raw search input.
+ * @param filterColumn Selected filter column ID.
+ * @param filterValue Raw column filter input.
+ * @returns The current query when nothing changed, otherwise a new query reset to page one. Does not throw.
+ */
+function withFilters(current: SalesQuery, search: string, filterColumn: string, filterValue: string): SalesQuery {
+    const value = filterValue.trim()
+    const next = {
+        filterColumn: filterColumn && value ? filterColumn : undefined,
+        filterValue: filterColumn && value ? value : undefined,
+        search: search.trim() || undefined,
+    }
+    if (
+        next.search === (current.search || undefined)
+        && next.filterColumn === current.filterColumn
+        && next.filterValue === current.filterValue
+    ) {
+        return current
+    }
+
+    return { ...current, ...next, page: 1 }
+}
 
 /**
  * Read-only Sales workspace, used on the dedicated host and inside Work.
@@ -85,16 +112,17 @@ const SalesPage: FC = () => {
         }
     }, [refresh, report?.refreshAfterSeconds])
 
-    /** @param event Filter form submission. @returns Nothing; applies controls from page one. Does not throw. */
+    useEffect(() => {
+        const timer = window.setTimeout(() => {
+            setQuery(current => withFilters(current, search, filterColumn, filterValue))
+        }, filterDebounceMs)
+        return () => window.clearTimeout(timer)
+    }, [search, filterColumn, filterValue])
+
+    /** @param event Filter form submission. @returns Nothing; applies pending controls immediately. Does not throw. */
     function applyFilters(event: FormEvent<HTMLFormElement>): void {
         event.preventDefault()
-        setQuery(current => ({
-            ...current,
-            filterColumn: filterColumn && filterValue.trim() ? filterColumn : undefined,
-            filterValue: filterColumn && filterValue.trim() ? filterValue.trim() : undefined,
-            page: 1,
-            search: search.trim(),
-        }))
+        setQuery(current => withFilters(current, search, filterColumn, filterValue))
     }
 
     /** Clears filters and sorting after a schema change or empty search; returns void and does not throw. */
@@ -229,7 +257,6 @@ const SalesPage: FC = () => {
                         />
                     </div>
                     <div className={styles.filterActions}>
-                        <Button disabled={loading || !report} noCaps secondary type='submit'>Apply</Button>
                         <Button noCaps onClick={clearFilters} link>Clear</Button>
                     </div>
                 </form>

From 642c4c7e4c19ab0f21febe41eceea94873451ac3 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Thu, 17 Sep 2026 14:03:49 +1000
Subject: [PATCH 16/22] PM-6329 Show new showcase fields in preview and
 customer showcase

Share a labelled details summary and story sections between the Work preview
modal and customer portal showcase, hiding any field or section that is empty.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/work-showcase-win.md                     |  10 +-
 .../ProjectShowcaseCard.module.scss           |   8 +
 .../ProjectShowcaseCard.tsx                   |  82 +++++-----
 .../ProjectShowcasePostPage.tsx               | 144 ++++++++++--------
 .../ShowcasePostDetails.module.scss           |  39 +++++
 .../ShowcasePostDetails.spec.tsx              |  55 +++++++
 .../ShowcasePostDetails.tsx                   | 114 ++++++++++++++
 .../components/ShowcasePostDetails/index.ts   |  10 ++
 .../ShowcasePostPreview.module.scss           |   8 -
 .../ShowcasePostPreview.tsx                   | 119 ++++++---------
 src/apps/work/src/lib/components/index.ts     |   1 +
 11 files changed, 416 insertions(+), 174 deletions(-)
 create mode 100644 src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.module.scss
 create mode 100644 src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
 create mode 100644 src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
 create mode 100644 src/apps/work/src/lib/components/ShowcasePostDetails/index.ts

diff --git a/docs/work-showcase-win.md b/docs/work-showcase-win.md
index 964be2ed1..816b21650 100644
--- a/docs/work-showcase-win.md
+++ b/docs/work-showcase-win.md
@@ -31,6 +31,14 @@ The Challenge, The Solution and Business Impact Realised use the same Markdown
 editor and sanitized rich-text preview. Key Win and Owner are single-line strings
 of up to 255 characters. Existing title, taxonomy and solution requirements remain.
 
+The Work preview modal and the customer portal showcase (`/showcase` cards and
+post pages) share `ShowcasePostDetails`. Type, Customer, SMU (the custom value
+for Others), Deal Close Date, Key Win, Current Status and Owner appear in a
+labelled summary, followed by The Challenge, The Solution and Business Impact
+Realised. Anything left blank is hidden, including empty media, challenge,
+stats and skills sections. Showcase cards show Type, Customer and Current Status
+when they are set.
+
 **Send to WIN** is unchecked for new posts and retains the saved choice on edits.
 Saving with the checkbox selected makes the record available to authorized callers
 of `GET /v6/reports/WIN`. This is a pull integration: the success message confirms
@@ -45,5 +53,5 @@ deploy the reports API change for WIN callers. No new UI environment variables a
 
 Use `.nvmrc`, then `yarn lint`, `yarn run build`, and the tests for
 `ProjectShowcasePage`, `ProjectEditorForm`, `project-editor.schema`, and
-`showcase-post.schema`. Manually check that editing metadata in either form is
+`showcase-post.schema` and `ShowcasePostDetails`. Manually check that editing metadata in either form is
 reflected when reopening the other form, and that opting in/out changes the WIN report.
diff --git a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.module.scss b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.module.scss
index d92c8a00b..50dcb2a2d 100644
--- a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.module.scss
+++ b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.module.scss
@@ -80,6 +80,14 @@
     gap: 12px;
 }
 
+.highlights {
+    color: $black-80;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    overflow-wrap: anywhere;
+}
+
 .taxonomy {
     display: flex;
     align-items: center;
diff --git a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.tsx b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.tsx
index b2cbd6cf0..c8c5c4820 100644
--- a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.tsx
+++ b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcaseCard/ProjectShowcaseCard.tsx
@@ -14,40 +14,52 @@ interface ProjectShowcaseCardProps {
     post: ProjectShowcasePost
 }
 
-const ProjectShowcaseCard: FC<ProjectShowcaseCardProps> = props => (
-    <article className={styles.wrap}>
-        <div className={styles.tags}>
-            {props.post.categories.map(category => (
-                <span className={classNames(styles.tag, toClassName(category.name))} id={category.id}>
-                    {category.name}
-                </span>
-            ))}
-        </div>
-
-        <h3 className={styles.title} title={props.post.title || 'Untitled'}>
-            {props.post.title || 'Untitled'}
-        </h3>
-        <div className={styles.taxonomy}>
-            <IconOutline.OfficeBuildingIcon className={classNames('icon-lg', styles.industryIcon)} />
-            <span>
-                {props.post.industries.map(item => item.name)
-                    .join(', ') || '—'}
-            </span>
-        </div>
-
-        <div className={styles.content}>
-            {renderRichTextToPlainText(props.post.content || '')}
-        </div>
-
-        <div className={styles.button}>
-            <LinkButton
-                size='sm'
-                label='View details'
-                secondary
-                to={getPostRoute(props.post.projectId as string, props.post.id)}
-            />
-        </div>
-    </article>
-)
+const ProjectShowcaseCard: FC<ProjectShowcaseCardProps> = props => {
+    const industries = props.post.industries.map(item => item.name)
+        .join(', ')
+    const highlights = [props.post.type, props.post.customer, props.post.currentStatus]
+        .map(value => value?.trim())
+        .filter(Boolean)
+        .join(' · ')
+    const summary = props.post.content || props.post.challenge || props.post.businessImpact || ''
+
+    return (
+        <article className={styles.wrap}>
+            <div className={styles.tags}>
+                {props.post.categories.map(category => (
+                    <span className={classNames(styles.tag, toClassName(category.name))} id={category.id}>
+                        {category.name}
+                    </span>
+                ))}
+            </div>
+
+            <h3 className={styles.title} title={props.post.title || 'Untitled'}>
+                {props.post.title || 'Untitled'}
+            </h3>
+            {highlights && <div className={styles.highlights}>{highlights}</div>}
+            {industries && (
+                <div className={styles.taxonomy}>
+                    <IconOutline.OfficeBuildingIcon className={classNames('icon-lg', styles.industryIcon)} />
+                    <span>{industries}</span>
+                </div>
+            )}
+
+            {summary && (
+                <div className={styles.content}>
+                    {renderRichTextToPlainText(summary)}
+                </div>
+            )}
+
+            <div className={styles.button}>
+                <LinkButton
+                    size='sm'
+                    label='View details'
+                    secondary
+                    to={getPostRoute(props.post.projectId as string, props.post.id)}
+                />
+            </div>
+        </article>
+    )
+}
 
 export default ProjectShowcaseCard
diff --git a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.tsx b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.tsx
index b75cb1ed7..e7d6eddcd 100644
--- a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.tsx
+++ b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.tsx
@@ -6,6 +6,8 @@ import { IconOutline, LinkButton, PageTitle } from '~/libs/ui'
 import { renderRichTextToHtml } from '~/libs/shared/lib/utils/rich-text'
 import { textFormatDateLocaleShortString } from '~/libs/shared/lib/utils/text-format'
 import {
+    getShowcaseStorySections,
+    ShowcasePostDetails,
     useFetchProjectShowcasePost,
     UseFetchProjectShowcasePostResult,
 } from '~/apps/work/src/lib'
@@ -30,6 +32,12 @@ const ProjectShowcasePostPage: FC = () => {
         encodeURIComponent(routeParams.projectId as string),
     ].join('/')
 
+    const storySections = useMemo(
+        () => (post ? getShowcaseStorySections(post) : []),
+        [post],
+    )
+    const challengeCount = post?.challengeMetadata?.length ?? 0
+
     const skills = useMemo(
         () => uniqBy(post?.challengeMetadata?.flatMap(entry => entry.skills), 'id') ?? [],
         [post?.challengeMetadata],
@@ -75,10 +83,12 @@ const ProjectShowcasePostPage: FC = () => {
                         {post?.title}
                     </h3>
                     <div className={styles.subTitle}>
-                        <div className={styles.subTitleItem}>
-                            <IconOutline.OfficeBuildingIcon className='icon-lg' />
-                            <span>{industries}</span>
-                        </div>
+                        {industries && (
+                            <div className={styles.subTitleItem}>
+                                <IconOutline.OfficeBuildingIcon className='icon-lg' />
+                                <span>{industries}</span>
+                            </div>
+                        )}
                         <div className={styles.subTitleItem}>
                             <IconOutline.CalendarIcon className='icon-lg' />
                             <span>Published</span>
@@ -90,24 +100,34 @@ const ProjectShowcasePostPage: FC = () => {
                 </div>
                 <div className={styles.contentBodyWrap}>
                     <div className={styles.contentBody}>
-                        <div
-                            className={styles.htmlContent}
-                            dangerouslySetInnerHTML={{
-                                __html: renderRichTextToHtml(post?.content || ''),
-                            }}
-                        />
-                        <div className={styles.contentSection}>
-                            <h5 className={styles.sectionTitle}>Media assets</h5>
-                            <ShowcasePostMedia
-                                assets={post?.media}
-                            />
-                        </div>
-                        <div className={styles.contentSection}>
-                            <h5 className={styles.sectionTitle}>Challenges</h5>
-                            <ShowcasePostChallengeList
-                                challengeIds={post?.challengeIds}
-                            />
-                        </div>
+                        {post && <ShowcasePostDetails data={post} />}
+                        {storySections.map(section => (
+                            <div key={section.label} className={styles.contentSection}>
+                                <h5 className={styles.sectionTitle}>{section.label}</h5>
+                                <div
+                                    className={styles.htmlContent}
+                                    dangerouslySetInnerHTML={{
+                                        __html: renderRichTextToHtml(section.value),
+                                    }}
+                                />
+                            </div>
+                        ))}
+                        {!!post?.media?.length && (
+                            <div className={styles.contentSection}>
+                                <h5 className={styles.sectionTitle}>Media assets</h5>
+                                <ShowcasePostMedia
+                                    assets={post.media}
+                                />
+                            </div>
+                        )}
+                        {!!post?.challengeIds?.length && (
+                            <div className={styles.contentSection}>
+                                <h5 className={styles.sectionTitle}>Topcoder Challenge Launched</h5>
+                                <ShowcasePostChallengeList
+                                    challengeIds={post.challengeIds}
+                                />
+                            </div>
+                        )}
                     </div>
                     <aside className={styles.contentBodySidebar}>
                         <div className={styles.panel}>
@@ -139,46 +159,50 @@ const ProjectShowcasePostPage: FC = () => {
                                 {projectUrl}
                             </span>
                         </div>
-                        <div className={styles.panel}>
-                            <h5 className={styles.panelTitle}>Stats</h5>
-                            <ul className={styles.statsList}>
-                                <li>
-                                    <strong>
-                                        {post?.challengeMetadata.length}
-                                    </strong>
-                                    <span>Challenges</span>
-                                </li>
-                                <li>
-                                    <strong>
-                                        {registrantsCount}
-                                    </strong>
-                                    <span>Registrants</span>
-                                </li>
-                                <li>
+                        {challengeCount > 0 && (
+                            <div className={styles.panel}>
+                                <h5 className={styles.panelTitle}>Stats</h5>
+                                <ul className={styles.statsList}>
+                                    <li>
+                                        <strong>
+                                            {challengeCount}
+                                        </strong>
+                                        <span>Challenges</span>
+                                    </li>
+                                    <li>
+                                        <strong>
+                                            {registrantsCount}
+                                        </strong>
+                                        <span>Registrants</span>
+                                    </li>
+                                    <li>
+                                        <strong>
+                                            {countriesCount}
+                                        </strong>
+                                        <span>Countries</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        )}
+                        {skills.length > 0 && (
+                            <div className={styles.panel}>
+                                <h5 className={styles.panelTitle}>Skills</h5>
+                                <p>
+                                    This showcase includes
+                                    {' '}
                                     <strong>
-                                        {countriesCount}
+                                        {skills.length}
+                                        {' '}
+                                        skills.
                                     </strong>
-                                    <span>Countries</span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div className={styles.panel}>
-                            <h5 className={styles.panelTitle}>Skills</h5>
-                            <p>
-                                This showcase includes
-                                {' '}
-                                <strong>
-                                    {skills.length}
-                                    {' '}
-                                    skills.
-                                </strong>
-                            </p>
-                            <ul className={styles.skillsList}>
-                                {skills.map(skill => (
-                                    <li key={skill.id}>{skill.name}</li>
-                                ))}
-                            </ul>
-                        </div>
+                                </p>
+                                <ul className={styles.skillsList}>
+                                    {skills.map(skill => (
+                                        <li key={skill.id}>{skill.name}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
                     </aside>
                 </div>
             </div>
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.module.scss b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.module.scss
new file mode 100644
index 000000000..90e938d39
--- /dev/null
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.module.scss
@@ -0,0 +1,39 @@
+@import '@libs/ui/styles/includes';
+
+.details {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: $sp-4 $sp-6;
+    margin: 0;
+    padding: $sp-4;
+    border-radius: 8px;
+    border: 1px solid $black-20;
+    background: $black-5;
+}
+
+.item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.label {
+    color: $black-80;
+    font-family: Roboto;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.value {
+    margin: 0;
+    color: $black-100;
+    font-family: Roboto;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    overflow-wrap: anywhere;
+}
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
new file mode 100644
index 000000000..582b1a5ad
--- /dev/null
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import ShowcasePostDetails, { getShowcaseDetailItems, getShowcaseStorySections } from './ShowcasePostDetails'
+
+jest.mock('~/libs/shared/lib/utils/text-format', () => ({
+    textFormatDateLocaleShortString: (date: Date) => date.toISOString()
+        .slice(0, 10),
+}), { virtual: true })
+
+const expectedDate = new Date(2026, 7, 15)
+    .toISOString()
+    .slice(0, 10)
+
+describe('Showcase post details', () => {
+    it('lists populated summary fields in order and hides missing ones', () => {
+        expect(getShowcaseDetailItems({
+            currentStatus: ' ',
+            customer: 'Wipro',
+            dealCloseDate: '2026-08-15',
+            keyWin: 'Win-win',
+            smu: 'Others',
+            smuOther: 'LATAM',
+            type: 'Private POD Delivery',
+        }))
+            .toEqual([
+                { label: 'Type', value: 'Private POD Delivery' },
+                { label: 'Customer', value: 'Wipro' },
+                { label: 'SMU', value: 'LATAM' },
+                { label: 'Deal Close Date', value: expectedDate },
+                { label: 'Key Win', value: 'Win-win' },
+            ])
+    })
+
+    it('returns only populated story sections', () => {
+        expect(getShowcaseStorySections({ businessImpact: 'Impact', challenge: '', content: 'Solution' })
+            .map(section => section.label))
+            .toEqual(['The Solution', 'Business Impact Realised'])
+    })
+
+    it('renders labelled values and nothing when no fields are populated', () => {
+        const view = render(<ShowcasePostDetails data={{}} />)
+        expect(view.container)
+            .toBeEmptyDOMElement()
+        view.rerender(<ShowcasePostDetails data={{ owner: 'oww', smu: 'Americas1' }} />)
+        expect(screen.getByText('SMU'))
+            .toBeInTheDocument()
+        expect(screen.getByText('Americas1'))
+            .toBeInTheDocument()
+        expect(screen.getByText('Owner'))
+            .toBeInTheDocument()
+        expect(screen.queryByText('Customer')).not.toBeInTheDocument()
+    })
+})
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
new file mode 100644
index 000000000..bd2e999cf
--- /dev/null
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
@@ -0,0 +1,114 @@
+import { FC } from 'react'
+
+import { textFormatDateLocaleShortString } from '~/libs/shared/lib/utils/text-format'
+
+import { ShowcaseMetadata } from '../../models/ProjectShowcasePost.model'
+
+import styles from './ShowcasePostDetails.module.scss'
+
+export interface ShowcasePostDetailItem {
+    label: string
+    value: string
+}
+
+export interface ShowcasePostStorySection {
+    label: string
+    value: string
+}
+
+/**
+ * Formats a stored YYYY-MM-DD date without shifting it across time zones.
+ * @param value Deal close date from the showcase or project metadata.
+ * @returns A localized short date, the trimmed input when it is not a calendar date, or undefined when empty.
+ * @throws Does not throw.
+ */
+function formatDealCloseDate(value: string | undefined): string | undefined {
+    const trimmed = value?.trim()
+    if (!trimmed) {
+        return undefined
+    }
+
+    const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(trimmed)
+    const date = match
+        ? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+        : new Date(trimmed)
+
+    return Number.isNaN(date.getTime())
+        ? trimmed
+        : textFormatDateLocaleShortString(date)
+}
+
+/**
+ * Collects the populated single-value showcase fields in display order.
+ * @param data Showcase and shared project metadata.
+ * @returns Label/value pairs with blank values removed; SMU uses the custom value for Others.
+ * @throws Does not throw.
+ */
+export function getShowcaseDetailItems(data: ShowcaseMetadata): ShowcasePostDetailItem[] {
+    const smu = data.smu === 'Others'
+        ? data.smuOther?.trim() || data.smu
+        : data.smu
+
+    return [
+        { label: 'Type', value: data.type },
+        { label: 'Customer', value: data.customer },
+        { label: 'SMU', value: smu },
+        { label: 'Deal Close Date', value: formatDealCloseDate(data.dealCloseDate) },
+        { label: 'Key Win', value: data.keyWin },
+        { label: 'Current Status', value: data.currentStatus },
+        { label: 'Owner', value: data.owner },
+    ]
+        .map(item => ({ label: item.label, value: item.value?.trim() ?? '' }))
+        .filter(item => !!item.value)
+}
+
+/**
+ * Collects the populated long-form showcase sections in display order.
+ * @param data Showcase rich text fields; content is The Solution.
+ * @returns Section labels and rich text values with blank sections removed.
+ * @throws Does not throw.
+ */
+export function getShowcaseStorySections(
+    data: Pick<ShowcaseMetadata, 'challenge' | 'businessImpact'> & { content?: string },
+): ShowcasePostStorySection[] {
+    return [
+        { label: 'The Challenge', value: data.challenge },
+        { label: 'The Solution', value: data.content },
+        { label: 'Business Impact Realised', value: data.businessImpact },
+    ]
+        .filter((item): item is ShowcasePostStorySection => !!item.value?.trim())
+}
+
+export interface ShowcasePostDetailsProps {
+    data: ShowcaseMetadata
+    className?: string
+}
+
+/**
+ * Shows the populated showcase summary fields shared by the Work preview and the customer showcase.
+ * @param props Showcase metadata and an optional wrapper class.
+ * @returns A labelled detail grid, or nothing when no summary field is populated.
+ * @throws Does not throw.
+ */
+const ShowcasePostDetails: FC<ShowcasePostDetailsProps> = props => {
+    const items = getShowcaseDetailItems(props.data)
+
+    if (!items.length) {
+        return <></>
+    }
+
+    return (
+        <dl className={[styles.details, props.className].filter(Boolean)
+            .join(' ')}
+        >
+            {items.map(item => (
+                <div key={item.label} className={styles.item}>
+                    <dt className={styles.label}>{item.label}</dt>
+                    <dd className={styles.value}>{item.value}</dd>
+                </div>
+            ))}
+        </dl>
+    )
+}
+
+export default ShowcasePostDetails
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/index.ts b/src/apps/work/src/lib/components/ShowcasePostDetails/index.ts
new file mode 100644
index 000000000..01dde5146
--- /dev/null
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/index.ts
@@ -0,0 +1,10 @@
+export {
+    default as ShowcasePostDetails,
+    getShowcaseDetailItems,
+    getShowcaseStorySections,
+} from './ShowcasePostDetails'
+export type {
+    ShowcasePostDetailItem,
+    ShowcasePostDetailsProps,
+    ShowcasePostStorySection,
+} from './ShowcasePostDetails'
diff --git a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
index 7f4a2985d..477fe9a0d 100644
--- a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
+++ b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
@@ -216,14 +216,6 @@
     margin: 0;
 }
 
-.emptyMessage {
-    margin: 0;
-    color: $black-80;
-    font-family: Roboto;
-    font-size: 14px;
-    line-height: 22px;
-}
-
 .mediaList {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
index aa62cb286..42e07abdc 100644
--- a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
+++ b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.tsx
@@ -6,6 +6,7 @@ import { renderRichTextToHtml } from '~/libs/shared/lib/utils/rich-text'
 import { textFormatDateLocaleShortString } from '~/libs/shared/lib/utils/text-format'
 
 import { ShowcaseMetadata } from '../../models/ProjectShowcasePost.model'
+import { getShowcaseStorySections, ShowcasePostDetails } from '../ShowcasePostDetails'
 
 import styles from './ShowcasePostPreview.module.scss'
 
@@ -101,41 +102,21 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
 
             <div className={styles.bodyWrap}>
                 <div className={styles.body}>
-                    <dl>
-                        {[
-                            ['Type', data.type],
-                            ['Customer', data.customer],
-                            ['SMU', data.smu === 'Others' ? data.smuOther : data.smu],
-                            ['Deal Close Date', data.dealCloseDate],
-                            ['Key Win', data.keyWin],
-                            ['Current Status', data.currentStatus],
-                            ['Owner', data.owner],
-                        ].filter(([, value]) => !!value)
-                            .map(([label, value]) => (
-                                <div key={label} className={styles.subTitleItem}>
-                                    <dt>{label}</dt>
-                                    <dd>{value}</dd>
-                                </div>
-                            ))}
-                    </dl>
-                    {[
-                        ['The Challenge', data.challenge],
-                        ['The Solution', data.content],
-                        ['Business Impact Realised', data.businessImpact],
-                    ].filter(([, value]) => !!value)
-                        .map(([label, value]) => (
-                            <section key={label} className={styles.section}>
-                                <h5 className={styles.sectionTitle}>{label}</h5>
+                    <ShowcasePostDetails data={data} />
+                    {getShowcaseStorySections(data)
+                        .map(section => (
+                            <section key={section.label} className={styles.section}>
+                                <h5 className={styles.sectionTitle}>{section.label}</h5>
                                 <div
                                     className={styles.htmlContent}
-                                    dangerouslySetInnerHTML={{ __html: renderRichTextToHtml(value || '') }}
+                                    dangerouslySetInnerHTML={{ __html: renderRichTextToHtml(section.value) }}
                                 />
                             </section>
                         ))}
 
-                    <section className={styles.section}>
-                        <h5 className={styles.sectionTitle}>Media assets</h5>
-                        {data.media.length > 0 ? (
+                    {data.media.length > 0 && (
+                        <section className={styles.section}>
+                            <h5 className={styles.sectionTitle}>Media assets</h5>
                             <ul className={styles.mediaList}>
                                 {data.media.map((item, index) => {
                                     const key: string = `${item.url}-${index}`
@@ -176,14 +157,12 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
                                     )
                                 })}
                             </ul>
-                        ) : (
-                            <p className={styles.emptyMessage}>No media added yet.</p>
-                        )}
-                    </section>
+                        </section>
+                    )}
 
-                    <section className={styles.section}>
-                        <h5 className={styles.sectionTitle}>Topcoder Challenge Launched</h5>
-                        {data.challenges.length > 0 ? (
+                    {data.challenges.length > 0 && (
+                        <section className={styles.section}>
+                            <h5 className={styles.sectionTitle}>Topcoder Challenge Launched</h5>
                             <ul className={styles.challengeList}>
                                 {data.challenges.map(challenge => {
                                     const challengeUrl: string | undefined = getSafeHttpUrl(
@@ -250,10 +229,8 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
                                     )
                                 })}
                             </ul>
-                        ) : (
-                            <p className={styles.emptyMessage}>No challenges selected.</p>
-                        )}
-                    </section>
+                        </section>
+                    )}
                 </div>
 
                 <aside className={styles.sidebar}>
@@ -276,43 +253,45 @@ const ShowcasePostPreview: FC<ShowcasePostPreviewProps> = props => {
                         )}
                     </div>
 
-                    <div className={styles.panel}>
-                        <h5 className={styles.panelTitle}>Stats</h5>
-                        <ul className={styles.statsList}>
-                            <li>
-                                <strong>{data.challengeCount}</strong>
-                                <span>Challenges</span>
-                            </li>
-                            <li>
-                                <strong>{data.registrantsCount}</strong>
-                                <span>Registrants</span>
-                            </li>
-                            <li>
-                                <strong>{data.countriesCount}</strong>
-                                <span>Countries</span>
-                            </li>
-                        </ul>
-                    </div>
+                    {data.challengeCount > 0 && (
+                        <div className={styles.panel}>
+                            <h5 className={styles.panelTitle}>Stats</h5>
+                            <ul className={styles.statsList}>
+                                <li>
+                                    <strong>{data.challengeCount}</strong>
+                                    <span>Challenges</span>
+                                </li>
+                                <li>
+                                    <strong>{data.registrantsCount}</strong>
+                                    <span>Registrants</span>
+                                </li>
+                                <li>
+                                    <strong>{data.countriesCount}</strong>
+                                    <span>Countries</span>
+                                </li>
+                            </ul>
+                        </div>
+                    )}
 
-                    <div className={styles.panel}>
-                        <h5 className={styles.panelTitle}>Skills</h5>
-                        <p className={styles.skillsSummary}>
-                            This showcase includes
-                            {' '}
-                            <strong>
-                                {data.skills.length}
+                    {data.skills.length > 0 && (
+                        <div className={styles.panel}>
+                            <h5 className={styles.panelTitle}>Skills</h5>
+                            <p className={styles.skillsSummary}>
+                                This showcase includes
                                 {' '}
-                                skills.
-                            </strong>
-                        </p>
-                        {data.skills.length > 0 && (
+                                <strong>
+                                    {data.skills.length}
+                                    {' '}
+                                    skills.
+                                </strong>
+                            </p>
                             <ul className={styles.skillsList}>
                                 {data.skills.map(skill => (
                                     <li key={skill.id}>{skill.name}</li>
                                 ))}
                             </ul>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </aside>
             </div>
         </div>
diff --git a/src/apps/work/src/lib/components/index.ts b/src/apps/work/src/lib/components/index.ts
index cf96cd2af..93daa28ce 100644
--- a/src/apps/work/src/lib/components/index.ts
+++ b/src/apps/work/src/lib/components/index.ts
@@ -35,6 +35,7 @@ export * from './ProjectsShowcaseFilter'
 export * from './ProjectsTable'
 export * from './ResourceAddModal'
 export * from './ResourcesTable'
+export * from './ShowcasePostDetails'
 export * from './ShowcasePostPreview'
 export * from './TerminateAssignmentModal'
 export * from './SubmissionDuplicatesRow'

From a8c2736aee6b52cb8690fb5690ae4ab44ec853b0 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Thu, 17 Sep 2026 16:17:11 +1000
Subject: [PATCH 17/22] PM-6347 Serve Sales dev host from the shared root build

Remove the isolated sales-app viewer-request rewrite so CircleCI deploys of the
root Platform UI build update sales.topcoder-dev.com, and document the route.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 infrastructure/sales/README.md             | 42 +++++++++++-----------
 infrastructure/sales/dev-viewer-request.js |  7 ++--
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/infrastructure/sales/README.md b/infrastructure/sales/README.md
index 0a144b964..f4c59c9d5 100644
--- a/infrastructure/sales/README.md
+++ b/infrastructure/sales/README.md
@@ -1,41 +1,39 @@
 # Sales dev route
 
-PM-6343 serves the branch build only on `sales.topcoder-dev.com`. The shared
-Platform UI S3 root and other app builds are preserved.
+`sales.topcoder-dev.com` is served by the shared Platform UI root build that
+CircleCI deploys on every `dev` merge, like Work, Customer and Reports. The build
+detects the `sales` subdomain at runtime (`EnvironmentConfig.SUBDOMAIN`) and
+renders the Sales page at `/`, so no Sales-specific build or upload is needed.
 
 | Resource | Dev value |
 | --- | --- |
 | AWS account / region | `811668436784` / `us-east-1` |
 | CloudFront distribution | `EFA7R1KH3UX5M` (`d10303ypawq4ub.cloudfront.net`) |
-| S3 bucket / prefix | `platform-mvp.topcoder-dev.com` / `sales-app/` |
+| S3 bucket | `platform-mvp.topcoder-dev.com` (root build, shared with other hosts) |
 | Route 53 public hosted zone | `Z2CIRG3R0ZSGFQ` |
 | Host | `sales.topcoder-dev.com` |
 | Viewer request function | `platform-sales-dev-viewer-request` |
 
-Build with `nvm use` followed by
-`LOGICAL_ENV=dev PUBLIC_URL=/sales-app yarn run build`. Upload build files under
-the prefix without deleting shared objects. Give hashed assets immutable cache
-headers and `sales-app/index.html` `no-cache,no-store,max-age=0`.
+`dev-viewer-request.js` mirrors the live viewer-request function. It has no Sales
+branch: Sales requests pass through unchanged and deep links fall back to the root
+`/index.html` through the distribution's 403/404 custom error responses. The
+function still routes the Contact and Accounts hosts to their isolated
+`contact-app/` and `accounts-preferences-app/` shells. Re-read the live function
+before publishing later changes to avoid overwriting newer routing, test with
+`aws cloudfront test-function` against the DEVELOPMENT stage, then publish.
 
-`dev-viewer-request.js` includes the existing Contact and Accounts routing from
-the live distribution. Its Sales branch rewrites navigation requests to
-`/sales-app/index.html` while allowing prefixed assets through. Test Sales root,
-deep links and assets, Contact and Accounts, and unrelated Work/Reports hosts
-before publishing. Re-read the live function when applying later changes to
-avoid overwriting newer routing. Attach the published function to the default
-behavior's viewer-request event, preserving every other association.
+The distribution alias and Route 53 A/AAAA records for the Sales host point at the
+same distribution; its ACM certificate covers `*.topcoder-dev.com`. Authentication
+continues through the standard Platform UI login.
 
-Add the Sales alias to the existing distribution. Its ACM certificate already
-covers `*.topcoder-dev.com`. Add a Route 53 A alias (and AAAA when IPv6 is enabled)
-to the same distribution, preserving all existing DNS records. Invalidate only
-`/sales-app/*`. Authentication continues through the standard Platform UI login.
+The former isolated `sales-app/` S3 prefix (PM-6343) is no longer referenced and
+can be deleted once the shared root route is confirmed.
 
 Deploy the reports-api-v6 PM-6343 branch to dev with its normal `dev-PM-6343` tag
 workflow. Server-only Salesforce configuration is documented in that repo's
 `SALES.md`. The Sales page uses `/v6/reports/sales`; WIN uses the separate
 `/v6/reports/win/sales` endpoint and requires an M2M grant for `reports:sales`.
 
-Rollback: remove the Sales alias/DNS entries and restore the prior viewer-request
-function association, leaving shared settings intact. The isolated S3 prefix can
-be retained for investigation. Restore the prior Reports API ECS task revision
-if rolling back the backend. No database migration is involved.
+Rollback: remove the Sales alias/DNS entries, leaving shared settings intact.
+Restore the prior Reports API ECS task revision if rolling back the backend.
+No database migration is involved.
diff --git a/infrastructure/sales/dev-viewer-request.js b/infrastructure/sales/dev-viewer-request.js
index a5c358290..eb03be60d 100644
--- a/infrastructure/sales/dev-viewer-request.js
+++ b/infrastructure/sales/dev-viewer-request.js
@@ -1,5 +1,6 @@
 /**
- * Routes the Sales, Contact and Accounts dev hosts to their isolated S3 shells.
+ * Routes the Contact and Accounts dev hosts to their isolated S3 shells.
+ * Sales and every other Platform UI host use the shared root build deployed by CircleCI.
  * @param {Object} event CloudFront viewer-request event containing the URI and Host header.
  * @returns {Object} Request with an app-specific SPA fallback; assets and unrelated hosts are preserved.
  * @throws No exceptions for valid CloudFront request events; performs no network I/O.
@@ -8,9 +9,7 @@ function handler(event) {
     var request = event.request;
     var host = request.headers.host ? request.headers.host.value.toLowerCase() : '';
     var prefix = '';
-    if (host === 'sales.topcoder-dev.com' || host === 'sales.topcoder-dev.com:443') {
-        prefix = '/sales-app/';
-    } else if (host === 'contact.topcoder-dev.com' || host === 'contact.topcoder-dev.com:443') {
+    if (host === 'contact.topcoder-dev.com' || host === 'contact.topcoder-dev.com:443') {
         prefix = '/contact-app/';
     } else if (host === 'account-settings.topcoder-dev.com' || host === 'account-settings.topcoder-dev.com:443') {
         // Keep shared assets available to Accounts pages opened before its isolated deployment.

From 1dd6eafc3c731bc64d0889dde98143930e6c0e35 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Thu, 17 Sep 2026 11:56:12 +0530
Subject: [PATCH 18/22] PM-6087 Fix the review config for anonymous user

---
 .../src/components/ChallengeSidebar.spec.tsx  |  9 ++++
 .../src/components/ChallengeSidebar.tsx       |  3 +-
 .../src/pages/ChallengeDetailsPage.tsx        |  1 +
 .../lib/utils/ai-review-config.utils.spec.ts  |  6 +--
 .../lib/utils/ai-review-config.utils.ts       | 50 ++++++++-----------
 5 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx b/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
index aa45bc697..f14646421 100644
--- a/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSidebar.spec.tsx
@@ -112,6 +112,7 @@ const marathonChallenge: ChallengeOpportunity = {
 function renderSidebar(
     aiReviewConfig?: ChallengeAiReviewConfig,
     sidebarChallenge: ChallengeOpportunity = challenge,
+    showReviewStyle: boolean = true,
 ): void {
     render(
         <MemoryRouter>
@@ -120,6 +121,7 @@ function renderSidebar(
                 challenge={sidebarChallenge}
                 onContactTeam={jest.fn()}
                 onShowTerms={jest.fn()}
+                showReviewStyle={showReviewStyle}
             />
         </MemoryRouter>,
     )
@@ -143,6 +145,13 @@ describe('ChallengeSidebar Review Style', () => {
             .not.toBeInTheDocument()
     })
 
+    it('does not show review style for anonymous viewers on development challenges', () => {
+        renderSidebar(undefined, developmentChallenge, false)
+
+        expect(screen.queryByRole('heading', { name: 'Review Style' }))
+            .not.toBeInTheDocument()
+    })
+
     it('shows manual review when no AI config exists for development challenges', () => {
         renderSidebar(undefined, developmentChallenge)
 
diff --git a/src/apps/opportunities/src/components/ChallengeSidebar.tsx b/src/apps/opportunities/src/components/ChallengeSidebar.tsx
index e6788fc81..94e4794cc 100644
--- a/src/apps/opportunities/src/components/ChallengeSidebar.tsx
+++ b/src/apps/opportunities/src/components/ChallengeSidebar.tsx
@@ -64,6 +64,7 @@ interface ChallengeSidebarProps {
     onShowTerms: (term?: ChallengeTerm) => void
     reviewStyleLoading?: boolean
     reviewStyleUnavailable?: boolean
+    showReviewStyle?: boolean
 }
 
 interface SidebarCardProps {
@@ -488,7 +489,7 @@ export const ChallengeSidebar: FC<ChallengeSidebarProps> = props => {
                         </div>
                     </>
                 )}
-                {developmentChallenge && !marathonMatch && (
+                {developmentChallenge && !marathonMatch && props.showReviewStyle && (
                     <ReviewStyleSection
                         config={props.aiReviewConfig}
                         loading={props.reviewStyleLoading}
diff --git a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
index c4edcb4d1..7fde0ff77 100644
--- a/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
+++ b/src/apps/opportunities/src/pages/ChallengeDetailsPage.tsx
@@ -868,6 +868,7 @@ export const ChallengeDetailsPage: FC = () => {
                             && aiReviewConfigResponse.data === undefined
                             && !aiReviewConfigResponse.error}
                         reviewStyleUnavailable={!!aiReviewConfigResponse.error}
+                        showReviewStyle={profileInitialized && !!profile}
                     />
                 )}
             </div>
diff --git a/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts b/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
index fb6779e58..de9749a45 100644
--- a/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
+++ b/src/libs/shared/lib/utils/ai-review-config.utils.spec.ts
@@ -19,11 +19,11 @@ describe('ai-review-config.utils', () => {
 
     it('formats review mode labels', () => {
         expect(formatReviewModeLabel())
-            .toBe('Manual (Manual review)')
+            .toBe('Manual')
         expect(formatReviewModeLabel({ instantReview: false, mode: 'AI_ONLY' }))
-            .toBe('AI only (AI review)')
+            .toBe('AI only')
         expect(formatReviewModeLabel({ instantReview: true, mode: 'AI_GATING' }))
-            .toBe('AI Gating (AI review + Manual review)')
+            .toBe('AI Gating')
     })
 
     it('formats instant review and detects AI config presence', () => {
diff --git a/src/libs/shared/lib/utils/ai-review-config.utils.ts b/src/libs/shared/lib/utils/ai-review-config.utils.ts
index 7d6f6afa1..c5c5af153 100644
--- a/src/libs/shared/lib/utils/ai-review-config.utils.ts
+++ b/src/libs/shared/lib/utils/ai-review-config.utils.ts
@@ -32,35 +32,6 @@ export function isDevelopmentChallengeTrack(
     return key === 'development' || key === 'dev' || key === 'develop'
 }
 
-/**
- * Returns the member-facing review mode label for challenge details surfaces.
- */
-export function formatReviewModeLabel(config?: AiReviewConfigSummary): string {
-    if (!config) {
-        return 'Manual (Manual review)'
-    }
-
-    if (config.mode === 'AI_GATING') {
-        return 'AI Gating (AI review + Manual review)'
-    }
-
-    return 'AI only (AI review)'
-}
-
-/**
- * Returns whether an AI review configuration is present for the challenge.
- */
-export function hasAiReviewConfig(config?: AiReviewConfigSummary): boolean {
-    return !!config
-}
-
-/**
- * Returns the ON/OFF label for instant review.
- */
-export function formatInstantReviewLabel(instantReview: boolean): string {
-    return instantReview ? 'ON' : 'OFF'
-}
-
 /**
  * Returns the sidebar review-mode bullet label and tooltip.
  */
@@ -86,6 +57,27 @@ export function getReviewStyleModeItem(config?: AiReviewConfigSummary): ReviewSt
     }
 }
 
+/**
+ * Returns the member-facing review mode label for challenge details surfaces.
+ */
+export function formatReviewModeLabel(config?: AiReviewConfigSummary): string {
+    return getReviewStyleModeItem(config).label
+}
+
+/**
+ * Returns whether an AI review configuration is present for the challenge.
+ */
+export function hasAiReviewConfig(config?: AiReviewConfigSummary): boolean {
+    return !!config
+}
+
+/**
+ * Returns the ON/OFF label for instant review.
+ */
+export function formatInstantReviewLabel(instantReview: boolean): string {
+    return instantReview ? 'ON' : 'OFF'
+}
+
 /**
  * Returns the sidebar instant-review bullet label and tooltip.
  */

From 7b76f962dbfad6ebe26deeb97f6d437f982bc421 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Fri, 18 Sep 2026 05:47:00 +1000
Subject: [PATCH 19/22] PM-6364 Add Created/Close date range filters and totals
 to Sales

Adds a date range section at the top of the Sales Portal so sales and
leadership can separate pipeline generation, analysed by Created Date, from
revenue realization, analysed by Close Date.

The Filter type dropdown lists the report's own date columns rather than
hard-coded Salesforce field IDs, and opens on Created Date. From and To are
inclusive and either may be left empty. The range applies on Apply filter,
Reset filter clears it without disturbing search, column filters or sorting,
and clearing the report filters leaves the range intact. An inverted range is
reported inline and never sent.

Summary tiles show the metrics the active filters produce: opportunity count,
a total per numeric column, and a per-stage breakdown. The Reports API
computes these over every matching record, so they describe the filtered
result rather than the page on screen, and a cross-currency total is rendered
as a plain number and labelled as mixed. The tiles are hidden when the API
returns no summary, so the page still works against an API that predates it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/apps/sales/README.md                 |  35 ++++-
 src/apps/sales/src/SalesPage.module.scss |  25 ++-
 src/apps/sales/src/SalesPage.spec.tsx    | 147 ++++++++++++++++-
 src/apps/sales/src/SalesPage.tsx         | 192 ++++++++++++++++++++++-
 src/apps/sales/src/sales.models.ts       |  43 +++++
 src/apps/sales/src/sales.service.ts      |   9 +-
 src/apps/sales/src/sales.utils.spec.ts   |  95 +++++++++++
 src/apps/sales/src/sales.utils.ts        |  87 ++++++++++
 8 files changed, 623 insertions(+), 10 deletions(-)
 create mode 100644 src/apps/sales/src/sales.utils.spec.ts
 create mode 100644 src/apps/sales/src/sales.utils.ts

diff --git a/src/apps/sales/README.md b/src/apps/sales/README.md
index 321b259e6..570ad3e9b 100644
--- a/src/apps/sales/README.md
+++ b/src/apps/sales/README.md
@@ -1,4 +1,4 @@
-# Sales (PM-6343)
+# Sales (PM-6343, PM-6364)
 
 Read-only Salesforce reporting for Administrators and Talent Managers. Available
 at `sales.topcoder.com` / `sales.topcoder-dev.com`, `/sales` on the combined host,
@@ -9,6 +9,36 @@ The page calls `GET {REPORTS_API}/sales` with the signed-in user's token. All
 Salesforce credentials stay in `reports-api-v6`. No create, update, delete,
 export, machine credentials or direct Salesforce API calls exist in the UI.
 
+## Date range filter (PM-6364)
+
+A date range section at the top of the page filters the report by **Created
+Date** for pipeline generation, or by **Close Date** for revenue projection.
+The Filter type dropdown lists the report's own `date`/`datetime` columns rather
+than hard-coded Salesforce field IDs, and opens on the Created Date column when
+the report has one. From date and To date are inclusive and either may be left
+empty for an open-ended range.
+
+Unlike the search and column filters, the range is only sent when **Apply
+filter** is pressed, and **Reset filter** clears it without disturbing search,
+column filters or sorting. Clearing the report filters likewise leaves the range
+intact. An inverted range is reported inline and never sent. A report with no
+date columns disables the section.
+
+The Reports API applies the range across the whole received snapshot before
+paginating, so a filtered count is the real matching count and not a per-page
+figure.
+
+## Filtered totals (PM-6364)
+
+Summary tiles above the report show the metrics the current filters produce over
+every matching record: opportunity count, a total per numeric column (pipeline
+value and revenue projections), and a breakdown per category column such as
+Stage. The API computes them, so they never describe only the visible page.
+Totals show their shared currency; a total that sums different currencies is
+rendered as a plain number and labelled as mixed. Tiles are hidden when the API
+returns no `summary`, which keeps the page working against an API that predates
+this feature.
+
 Report metadata determines every displayed column, including grouped Stage.
 Search and column substring filters apply automatically as the user types (debounced); headers sort globally
 before server pagination. Changing a filter, sort or page size starts at page
@@ -31,5 +61,8 @@ Sans body text, semantic color tokens, shared buttons and loading controls, and
 explicitly labelled native filter controls. Source design guidance:
 [Topcoder Design System — August 2026](https://www.figma.com/design/C2cA6508RhpjWJDp7MLKbO/Topcoder-Design-System---Aug-2026?node-id=1-54).
 
+Aggregates and the date range both cover received rows only, so `allData: false`
+limits them exactly as it limits the record count.
+
 Run `nvm use` in platform-ui before `yarn lint`, `LOGICAL_ENV=dev yarn run build`,
 and `CI=true yarn test:no-watch --runInBand --watch=false sales`.
diff --git a/src/apps/sales/src/SalesPage.module.scss b/src/apps/sales/src/SalesPage.module.scss
index 83de541e5..77e127c91 100644
--- a/src/apps/sales/src/SalesPage.module.scss
+++ b/src/apps/sales/src/SalesPage.module.scss
@@ -41,6 +41,27 @@
 .filterField input::placeholder { color: $tc-2026-muted; opacity: 1; }
 .filterField input:disabled { background: $tc-2026-border; cursor: not-allowed; }
 .filterActions { min-height: 48px; }
+.dateFilters { margin-bottom: 24px; }
+.dateFieldset { background: $tc-2026-surface; border: 1px solid $tc-2026-border; border-radius: $tc-2026-radius-lg; box-shadow: $tc-2026-shadow-card; padding: 24px; margin: 0; }
+.dateLegend { font-size: $tc-2026-h4-size; line-height: 32px; font-weight: 700; padding: 0; }
+.dateHint { margin-top: 4px; color: $tc-2026-muted; max-width: 820px; }
+.dateControls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
+.dateStatus { margin-top: 16px; font-size: 13px; color: $tc-2026-muted; }
+.dateError { color: $tc-2026-danger; font-weight: 700; }
+.summary { margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
+.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
+.metric { background: $tc-2026-surface; border: 1px solid $tc-2026-border; border-radius: $tc-2026-radius-lg; box-shadow: $tc-2026-shadow-card; padding: 20px 24px; }
+.metricLabel { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: $tc-2026-muted; }
+.metricValue { font-size: 32px; line-height: 40px; font-weight: 700; margin-top: 8px; overflow-wrap: anywhere; }
+.metricNote { margin-top: 8px; font-size: 13px; color: $tc-2026-muted; }
+.breakdown { background: $tc-2026-surface; border: 1px solid $tc-2026-border; border-radius: $tc-2026-radius-lg; box-shadow: $tc-2026-shadow-card; padding: 20px 24px; }
+.breakdown h3 { font-size: 20px; line-height: 28px; }
+.breakdown ul { list-style: none; margin-top: 12px; }
+.breakdown li { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid $tc-2026-border; }
+.breakdown li:last-child { border-bottom: 0; }
+.bucketLabel { font-weight: 700; flex: 1 1 200px; overflow-wrap: anywhere; }
+.bucketCount { color: $tc-2026-muted; font-size: 13px; }
+.bucketTotal { font-weight: 700; min-width: 120px; text-align: right; }
 .tableScroll { overflow-x: auto; width: 100%; }
 .table { width: 100%; border-collapse: collapse; text-align: left; }
 .table th { background: $tc-2026-canvas; white-space: nowrap; border-bottom: 1px solid $tc-2026-border; }
@@ -69,8 +90,10 @@
     .page { padding: 20px 12px 40px; }
     .header h1 { font-size: 36px; line-height: 44px; }
     .headerActions { width: 100%; justify-content: space-between; }
-    .panelHeader, .filters, .pagination { padding: 16px; }
+    .panelHeader, .filters, .pagination, .dateFieldset, .metric, .breakdown { padding: 16px; }
     .panelHeader { align-items: flex-start; flex-direction: column; }
     .filterField { flex-basis: 100%; }
+    .filterActions { width: 100%; }
+    .bucketTotal { text-align: left; min-width: 0; }
     .error { align-items: flex-start; flex-direction: column; }
 }
diff --git a/src/apps/sales/src/SalesPage.spec.tsx b/src/apps/sales/src/SalesPage.spec.tsx
index c51c352e3..18d205609 100644
--- a/src/apps/sales/src/SalesPage.spec.tsx
+++ b/src/apps/sales/src/SalesPage.spec.tsx
@@ -29,15 +29,50 @@ const fetchReport = fetchSalesReport as jest.MockedFunction<typeof fetchSalesRep
 function fixture(): SalesReport {
     return {
         allData: true,
-        columns: [{ dataType: 'string', id: 'NAME', label: 'Opportunity' }],
+        columns: [
+            { dataType: 'picklist', id: 'STAGE_NAME', label: 'Stage' },
+            { dataType: 'string', id: 'NAME', label: 'Opportunity' },
+            { dataType: 'currency', id: 'AMOUNT', label: 'Amount' },
+            { dataType: 'datetime', id: 'CREATED_DATE', label: 'Created Date' },
+            { dataType: 'date', id: 'CLOSE_DATE', label: 'Close Date' },
+        ],
         page: 1,
         perPage: 25,
         refreshAfterSeconds: 60,
         refreshedAt: '2026-09-16T02:00:00Z',
         reportId: 'test-report',
         reportName: 'Bookings By Stage',
-        rows: [{ cells: [{ label: 'Example opportunity', value: 'record-id' }], id: '0:0' }],
+        rows: [{
+            cells: [
+                { label: 'Proposal', value: 'Proposal' },
+                { label: 'Example opportunity', value: 'record-id' },
+                { currencyCode: 'USD', label: '$1,000', value: 1000 },
+                { label: '9/1/2026', value: '2026-09-01T10:00:00Z' },
+                { label: '9/30/2026', value: '2026-09-30' },
+            ],
+            id: '0:0',
+        }],
         sourceRowCount: 30,
+        summary: {
+            amounts: [{
+                columnId: 'AMOUNT',
+                count: 28,
+                currencyCode: 'USD',
+                label: 'Amount',
+                mixedCurrency: false,
+                total: 1234567,
+            }],
+            groups: [{
+                amountColumnId: 'AMOUNT',
+                buckets: [{ count: 18, label: 'Proposal', total: 900000 }],
+                columnId: 'STAGE_NAME',
+                currencyCode: 'USD',
+                label: 'Stage',
+                mixedCurrency: false,
+                otherBuckets: 2,
+            }],
+            recordCount: 30,
+        },
         total: 30,
         totalPages: 2,
     }
@@ -158,4 +193,112 @@ describe('Sales page', () => {
         visibility.mockRestore()
         jest.useRealTimers()
     })
+
+    it('offers the report date fields, defaults to Created Date and applies an inclusive range', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        const field = screen.getByLabelText('Filter type') as HTMLSelectElement
+        expect([...field.options].map(option => option.text))
+            .toEqual(['Created Date', 'Close Date'])
+        expect(field.value)
+            .toBe('CREATED_DATE')
+        fireEvent.change(field, { target: { value: 'CLOSE_DATE' } })
+        fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-07-01' } })
+        fireEvent.change(screen.getByLabelText('To date'), { target: { value: '2026-09-30' } })
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+        fireEvent.click(screen.getByRole('button', { name: 'Apply filter' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(expect.objectContaining({
+                dateColumn: 'CLOSE_DATE', dateFrom: '2026-07-01', dateTo: '2026-09-30', page: 1,
+            }), expect.any(AbortSignal)))
+        await screen.findByText(/Showing records by Close Date from 2026-07-01 through 2026-09-30/)
+    })
+
+    it('refuses an inverted range without sending a request and clears the error on reset', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-09-30' } })
+        fireEvent.change(screen.getByLabelText('To date'), { target: { value: '2026-09-01' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Apply filter' }))
+        await screen.findByText('The From date must be on or before the To date.')
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+        fireEvent.click(screen.getByRole('button', { name: 'Reset filter' }))
+        await waitFor(() => expect(screen.queryByText('The From date must be on or before the To date.'))
+            .not.toBeInTheDocument())
+        expect(screen.getByLabelText('From date'))
+            .toHaveValue('')
+        expect(fetchReport)
+            .toHaveBeenCalledTimes(1)
+    })
+
+    it('resets an applied range and keeps the range when report filters are cleared', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        fireEvent.change(screen.getByLabelText('From date'), { target: { value: '2026-09-01' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Apply filter' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.objectContaining({ dateColumn: 'CREATED_DATE', dateFrom: '2026-09-01' }),
+                expect.any(AbortSignal),
+            ))
+        fireEvent.change(screen.getByLabelText('Search sales'), { target: { value: 'Example' } })
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.objectContaining({ dateFrom: '2026-09-01', search: 'Example' }),
+                expect.any(AbortSignal),
+            ))
+        // Clearing the report filters must not silently empty the separate date range.
+        fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.not.objectContaining({ search: 'Example' }),
+                expect.any(AbortSignal),
+            ))
+        expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.objectContaining({ dateColumn: 'CREATED_DATE', dateFrom: '2026-09-01' }),
+                expect.any(AbortSignal),
+            )
+        fireEvent.click(screen.getByRole('button', { name: 'Reset filter' }))
+        await waitFor(() => expect(fetchReport)
+            .toHaveBeenLastCalledWith(
+                expect.objectContaining({ dateColumn: undefined, dateFrom: undefined, dateTo: undefined }),
+                expect.any(AbortSignal),
+            ))
+        await screen.findByText('No date range applied.')
+    })
+
+    it('shows totals for every matching record rather than the returned page', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        expect(screen.getByText('$1,234,567'))
+            .toBeInTheDocument()
+        expect(screen.getByText('28 of 30 records with a value'))
+            .toBeInTheDocument()
+        expect(screen.getByText('Stage breakdown'))
+            .toBeInTheDocument()
+        expect(screen.getByText('18 records'))
+            .toBeInTheDocument()
+        expect(screen.getByText('2 further values not shown.'))
+            .toBeInTheDocument()
+    })
+
+    it('disables the range and hides totals for a report that provides neither', async () => {
+        fetchReport.mockResolvedValue({
+            ...fixture(),
+            columns: [{ dataType: 'string', id: 'NAME', label: 'Opportunity' }],
+            rows: [{ cells: [{ label: 'Example opportunity', value: 'record-id' }], id: '0:0' }],
+            summary: undefined,
+        })
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+        expect(screen.getByLabelText('Filter type'))
+            .toBeDisabled()
+        expect(screen.getByRole('button', { name: 'Apply filter' }))
+            .toBeDisabled()
+        expect(screen.queryByText('Opportunities'))
+            .not.toBeInTheDocument()
+    })
 })
diff --git a/src/apps/sales/src/SalesPage.tsx b/src/apps/sales/src/SalesPage.tsx
index 31b9cf32d..2c45a0761 100644
--- a/src/apps/sales/src/SalesPage.tsx
+++ b/src/apps/sales/src/SalesPage.tsx
@@ -2,12 +2,19 @@
 /* eslint react/jsx-no-bind: ["error", { "allowArrowFunctions": true, "allowFunctions": true }] */
 /* The horizontal report viewport must be focusable for keyboard scrolling. */
 /* eslint jsx-a11y/no-noninteractive-tabindex: ["error", { "roles": ["region"] }] */
-import { FC, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button, IconOutline, LoadingSpinner, PageTitle } from '~/libs/ui'
 
 import { SalesQuery, SalesReport } from './sales.models'
 import { fetchSalesReport, salesErrorMessage } from './sales.service'
+import {
+    dateColumns,
+    dateRangeError,
+    defaultDateColumn,
+    formatSummaryAmount,
+    withDateRange,
+} from './sales.utils'
 import styles from './SalesPage.module.scss'
 import './sales.scss'
 
@@ -42,7 +49,8 @@ function withFilters(current: SalesQuery, search: string, filterColumn: string,
 
 /**
  * Read-only Sales workspace, used on the dedicated host and inside Work.
- * @returns An accessible metadata-driven report with server-side view controls and live refresh.
+ * @returns An accessible metadata-driven report with a Created/Close date range filter,
+ * snapshot-wide totals, server-side view controls and live refresh.
  * @throws Does not throw request failures; shows inline recovery and stale-data status.
  */
 const SalesPage: FC = () => {
@@ -50,6 +58,10 @@ const SalesPage: FC = () => {
     const [search, setSearch] = useState('')
     const [filterColumn, setFilterColumn] = useState('')
     const [filterValue, setFilterValue] = useState('')
+    const [dateColumn, setDateColumn] = useState('')
+    const [dateFrom, setDateFrom] = useState('')
+    const [dateTo, setDateTo] = useState('')
+    const [dateError, setDateError] = useState('')
     const [report, setReport] = useState<SalesReport>()
     const [error, setError] = useState('')
     const [loading, setLoading] = useState(true)
@@ -130,7 +142,15 @@ const SalesPage: FC = () => {
         setSearch('')
         setFilterColumn('')
         setFilterValue('')
-        setQuery({ ...initialQuery, perPage: query.perPage })
+        // The date range is its own section with its own reset, so clearing the
+        // report filters must not empty it behind the user's back.
+        setQuery(current => ({
+            ...initialQuery,
+            dateColumn: current.dateColumn,
+            dateFrom: current.dateFrom,
+            dateTo: current.dateTo,
+            perPage: current.perPage,
+        }))
     }
 
     /** @param id Report column ID. @returns Nothing; toggles global sorting and resets pagination. Does not throw. */
@@ -143,6 +163,36 @@ const SalesPage: FC = () => {
         }))
     }
 
+    const availableDates = useMemo(() => dateColumns(report), [report])
+
+    useEffect(() => {
+        // The report defines its own date fields, so the selection follows the
+        // live schema instead of hard-coded Salesforce column IDs.
+        if (!availableDates.length) return
+        if (availableDates.some(column => column.id === dateColumn)) return
+        setDateColumn(defaultDateColumn(availableDates))
+    }, [availableDates, dateColumn])
+
+    /** @param event Date range submission. @returns Nothing; applies a valid range. Does not throw. */
+    function applyDateRange(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault()
+        const invalid = dateRangeError(dateColumn, dateFrom, dateTo)
+        setDateError(invalid)
+        if (invalid) return
+        setQuery(current => withDateRange(current, dateColumn, dateFrom, dateTo))
+    }
+
+    /** Clears the date range without disturbing search, column filters or sorting. Does not throw. */
+    function resetDateRange(): void {
+        setDateFrom('')
+        setDateTo('')
+        setDateError('')
+        setDateColumn(defaultDateColumn(availableDates))
+        setQuery(current => withDateRange(current, '', '', ''))
+    }
+
+    const rangeApplied = !!query.dateColumn
+    const summary = report?.summary
     const firstRow = report?.total ? (report.page - 1) * report.perPage + 1 : 0
     const lastRow = report ? Math.min(report.page * report.perPage, report.total) : 0
     const updatedAt = report ? new Date(report.refreshedAt)
@@ -200,6 +250,142 @@ const SalesPage: FC = () => {
                 </div>
             )}
 
+            <form className={styles.dateFilters} onSubmit={applyDateRange}>
+                <fieldset className={styles.dateFieldset}>
+                    <legend className={styles.dateLegend}>Date range filter</legend>
+                    <p className={styles.dateHint}>
+                        Filter by Created Date for pipeline generation, or by Close Date for revenue
+                        projections. Counts and totals below cover every matching record, not just this page.
+                    </p>
+                    <div className={styles.dateControls}>
+                        <div className={styles.filterField}>
+                            <label htmlFor='sales-date-column'>Filter type</label>
+                            <select
+                                disabled={!availableDates.length}
+                                id='sales-date-column'
+                                onChange={event => setDateColumn(event.target.value)}
+                                value={dateColumn}
+                            >
+                                {!availableDates.length && <option value=''>No date fields available</option>}
+                                {availableDates.map(column => (
+                                    <option key={column.id} value={column.id}>{column.label}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className={styles.filterField}>
+                            <label htmlFor='sales-date-from'>From date</label>
+                            <input
+                                disabled={!availableDates.length}
+                                id='sales-date-from'
+                                name='sales-date-from'
+                                onChange={event => setDateFrom(event.target.value)}
+                                type='date'
+                                value={dateFrom}
+                            />
+                        </div>
+                        <div className={styles.filterField}>
+                            <label htmlFor='sales-date-to'>To date</label>
+                            <input
+                                disabled={!availableDates.length}
+                                id='sales-date-to'
+                                name='sales-date-to'
+                                onChange={event => setDateTo(event.target.value)}
+                                type='date'
+                                value={dateTo}
+                            />
+                        </div>
+                        <div className={styles.filterActions}>
+                            <Button
+                                disabled={!availableDates.length}
+                                noCaps
+                                primary
+                                type='submit'
+                            >
+                                Apply filter
+                            </Button>
+                            <Button
+                                disabled={!rangeApplied && !dateFrom && !dateTo}
+                                noCaps
+                                onClick={resetDateRange}
+                                secondary
+                            >
+                                Reset filter
+                            </Button>
+                        </div>
+                    </div>
+                    <p className={styles.dateStatus} aria-live='polite' role='status'>
+                        {dateError && <span className={styles.dateError}>{dateError}</span>}
+                        {!dateError && rangeApplied && (
+                            <span>
+                                {`Showing records by ${availableDates
+                                    .find(column => column.id === query.dateColumn)?.label ?? query.dateColumn}`}
+                                {query.dateFrom ? ` from ${query.dateFrom}` : ''}
+                                {query.dateTo ? ` through ${query.dateTo}` : ''}
+                                .
+                            </span>
+                        )}
+                        {!dateError && !rangeApplied && <span>No date range applied.</span>}
+                    </p>
+                </fieldset>
+            </form>
+
+            {summary && (
+                <section className={styles.summary} aria-label='Filtered sales totals'>
+                    <div className={styles.metrics}>
+                        <div className={styles.metric}>
+                            <p className={styles.metricLabel}>Opportunities</p>
+                            <p className={styles.metricValue}>{summary.recordCount.toLocaleString()}</p>
+                            <p className={styles.metricNote}>Matching records</p>
+                        </div>
+                        {summary.amounts.map(amount => (
+                            <div className={styles.metric} key={amount.columnId}>
+                                <p className={styles.metricLabel}>{amount.label}</p>
+                                <p className={styles.metricValue}>{formatSummaryAmount(amount)}</p>
+                                <p className={styles.metricNote}>
+                                    {`${amount.count.toLocaleString()} of `}
+                                    {`${summary.recordCount.toLocaleString()} records with a value`}
+                                    {amount.mixedCurrency ? ' · totals mixed currencies' : ''}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                    {summary.groups.map(group => (
+                        <div className={styles.breakdown} key={group.columnId}>
+                            <h3>{`${group.label} breakdown`}</h3>
+                            <ul>
+                                {group.buckets.map(bucket => (
+                                    <li key={bucket.label || '—'}>
+                                        <span className={styles.bucketLabel}>{bucket.label || '—'}</span>
+                                        <span className={styles.bucketCount}>
+                                            {`${bucket.count.toLocaleString()} records`}
+                                        </span>
+                                        <span className={styles.bucketTotal}>
+                                            {formatSummaryAmount({
+                                                columnId: group.columnId,
+                                                count: bucket.count,
+                                                currencyCode: group.currencyCode,
+                                                label: bucket.label,
+                                                mixedCurrency: group.mixedCurrency,
+                                                total: bucket.total,
+                                            })}
+                                        </span>
+                                    </li>
+                                ))}
+                                {!group.buckets.length && <li><span>No matching records.</span></li>}
+                            </ul>
+                            {group.mixedCurrency && (
+                                <p className={styles.metricNote}>Totals mix currencies.</p>
+                            )}
+                            {group.otherBuckets > 0 && (
+                                <p className={styles.metricNote}>
+                                    {`${group.otherBuckets.toLocaleString()} further values not shown.`}
+                                </p>
+                            )}
+                        </div>
+                    ))}
+                </section>
+            )}
+
             <section className={styles.panel} aria-label='Sales report'>
                 <div className={styles.panelHeader}>
                     <div>
diff --git a/src/apps/sales/src/sales.models.ts b/src/apps/sales/src/sales.models.ts
index 41664ddc7..2c3b2ffcf 100644
--- a/src/apps/sales/src/sales.models.ts
+++ b/src/apps/sales/src/sales.models.ts
@@ -1,3 +1,39 @@
+/** A numeric report column totalled across every matching row, not only the current page. */
+export interface SalesSummaryAmount {
+    columnId: string
+    label: string
+    total: number
+    count: number
+    /** True when contributing rows declared different currencies, making the total a bare sum. */
+    mixedCurrency: boolean
+    currencyCode?: string
+}
+
+/** One distinct value of a category column, such as a pipeline stage. */
+export interface SalesSummaryBucket {
+    label: string
+    count: number
+    total: number
+}
+
+/** A category column broken down into its distinct values, largest total first. */
+export interface SalesSummaryGroup {
+    columnId: string
+    label: string
+    amountColumnId?: string
+    mixedCurrency: boolean
+    currencyCode?: string
+    buckets: SalesSummaryBucket[]
+    otherBuckets: number
+}
+
+/** Aggregates the API recomputes over every matching row for the active query. */
+export interface SalesSummary {
+    recordCount: number
+    amounts: SalesSummaryAmount[]
+    groups: SalesSummaryGroup[]
+}
+
 /** Metadata-driven report contract shared by Sales and the WIN integration. */
 export interface SalesReport {
     reportId: string
@@ -15,6 +51,7 @@ export interface SalesReport {
     totalPages: number
     refreshedAt: string
     refreshAfterSeconds: number
+    summary?: SalesSummary
 }
 
 export interface SalesQuery {
@@ -23,6 +60,12 @@ export interface SalesQuery {
     search?: string
     filterColumn?: string
     filterValue?: string
+    /** Date or datetime column the range applies to, such as Created Date or Close Date. */
+    dateColumn?: string
+    /** Inclusive YYYY-MM-DD lower bound; requires dateColumn. */
+    dateFrom?: string
+    /** Inclusive YYYY-MM-DD upper bound; requires dateColumn. */
+    dateTo?: string
     sortBy?: string
     sortOrder?: 'asc' | 'desc'
     refresh?: boolean
diff --git a/src/apps/sales/src/sales.service.ts b/src/apps/sales/src/sales.service.ts
index 8aefc94ed..113b08160 100644
--- a/src/apps/sales/src/sales.service.ts
+++ b/src/apps/sales/src/sales.service.ts
@@ -5,9 +5,9 @@ import { SalesQuery, SalesReport } from './sales.models'
 
 /**
  * Reads Salesforce report data through the role-protected Reports API using the user's token.
- * @param query Server-side search, filter, sorting, pagination and refresh options.
+ * @param query Server-side search, filter, date range, sorting, pagination and refresh options.
  * @param signal Cancels obsolete requests when controls change or the page unmounts.
- * @returns The current report schema and one page of rows.
+ * @returns The current report schema, snapshot-wide totals and one page of rows.
  * @throws Propagates network, authorization and sanitized Reports API errors.
  */
 export function fetchSalesReport(query: SalesQuery, signal?: AbortSignal): Promise<SalesReport> {
@@ -33,6 +33,9 @@ export function salesErrorMessage(error: unknown): string {
     if (status === 401) return 'Your session has expired. Sign in again to view sales data.'
     if (status === 403) return 'Sales data is available to Administrators and Talent Managers.'
     if (status === 503) return 'The sales connection is not configured yet. Contact your administrator.'
-    if (status === 400) return 'The report columns have changed. Clear the filters and sorting, then try again.'
+    if (status === 400) {
+        return 'The report columns have changed. Reset the date range, clear the filters and sorting, then try again.'
+    }
+
     return 'We could not refresh the Salesforce report. Please try again.'
 }
diff --git a/src/apps/sales/src/sales.utils.spec.ts b/src/apps/sales/src/sales.utils.spec.ts
new file mode 100644
index 000000000..9c9e11790
--- /dev/null
+++ b/src/apps/sales/src/sales.utils.spec.ts
@@ -0,0 +1,95 @@
+import { SalesReport } from './sales.models'
+import {
+    dateColumns,
+    dateRangeError,
+    defaultDateColumn,
+    formatSummaryAmount,
+    withDateRange,
+} from './sales.utils'
+
+/** @returns A synthetic report schema with both pipeline date fields. Does not throw. */
+function report(): SalesReport {
+    return {
+        allData: true,
+        columns: [
+            { dataType: 'string', id: 'NAME', label: 'Opportunity' },
+            { dataType: 'currency', id: 'AMOUNT', label: 'Amount' },
+            { dataType: 'datetime', id: 'CREATED_DATE', label: 'Created Date' },
+            { dataType: 'date', id: 'CLOSE_DATE', label: 'Close Date' },
+        ],
+        page: 1,
+        perPage: 25,
+        refreshAfterSeconds: 60,
+        refreshedAt: '2026-09-16T02:00:00Z',
+        reportId: 'test-report',
+        reportName: 'Bookings By Stage',
+        rows: [],
+        sourceRowCount: 0,
+        total: 0,
+        totalPages: 0,
+    }
+}
+
+describe('Sales date range utilities', () => {
+    it('offers only date fields and opens on Created Date for pipeline analysis', () => {
+        const columns = dateColumns(report())
+        expect(columns.map(column => column.id))
+            .toEqual(['CREATED_DATE', 'CLOSE_DATE'])
+        expect(defaultDateColumn(columns))
+            .toBe('CREATED_DATE')
+        expect(dateColumns(undefined))
+            .toEqual([])
+        expect(defaultDateColumn([]))
+            .toBe('')
+        expect(defaultDateColumn([{ dataType: 'date', id: 'CLOSE_DATE', label: 'Close Date' }]))
+            .toBe('CLOSE_DATE')
+    })
+
+    it('rejects an inverted range and a bound without a field before any request', () => {
+        expect(dateRangeError('CLOSE_DATE', '2026-09-30', '2026-09-01'))
+            .toBe('The From date must be on or before the To date.')
+        expect(dateRangeError('', '2026-09-01', ''))
+            .toBe('Choose the date field this range applies to.')
+        expect(dateRangeError('CLOSE_DATE', '2026-09-01', '2026-09-30'))
+            .toBe('')
+        expect(dateRangeError('CLOSE_DATE', '', ''))
+            .toBe('')
+        expect(dateRangeError('', '', ''))
+            .toBe('')
+    })
+
+    it('sends a range only once a bound is set and restarts at the first page', () => {
+        const base = { page: 4, perPage: 25 }
+        expect(withDateRange(base, 'CLOSE_DATE', '', ''))
+            .toBe(base)
+        expect(withDateRange(base, 'CLOSE_DATE', '2026-09-01', ''))
+            .toEqual({ dateColumn: 'CLOSE_DATE', dateFrom: '2026-09-01', dateTo: undefined, page: 1, perPage: 25 })
+        expect(withDateRange(base, 'CLOSE_DATE', '', '2026-09-30'))
+            .toEqual({ dateColumn: 'CLOSE_DATE', dateFrom: undefined, dateTo: '2026-09-30', page: 1, perPage: 25 })
+        const applied = withDateRange(base, 'CLOSE_DATE', '2026-09-01', '2026-09-30')
+        expect(withDateRange(applied, 'CLOSE_DATE', '2026-09-01', '2026-09-30'))
+            .toBe(applied)
+        expect(withDateRange(applied, '', '', ''))
+            .toMatchObject({ dateColumn: undefined, dateFrom: undefined, dateTo: undefined, page: 1 })
+    })
+
+    it('labels a total with its shared currency and leaves a mixed sum unlabelled', () => {
+        expect(formatSummaryAmount({
+            columnId: 'AMOUNT', count: 2, currencyCode: 'USD', label: 'Amount', mixedCurrency: false, total: 1234.56,
+        }))
+            .toBe('$1,235')
+        expect(formatSummaryAmount({
+            columnId: 'AMOUNT', count: 2, label: 'Amount', mixedCurrency: true, total: 1234.56,
+        }))
+            .toBe('1,235')
+        expect(formatSummaryAmount({
+            columnId: 'AMOUNT',
+            count: 0,
+            currencyCode: 'not-a-currency',
+            label: 'Amount',
+            mixedCurrency: false,
+            total: 0,
+        }))
+            .toBe('0')
+    })
+})
diff --git a/src/apps/sales/src/sales.utils.ts b/src/apps/sales/src/sales.utils.ts
new file mode 100644
index 000000000..6fe8ea710
--- /dev/null
+++ b/src/apps/sales/src/sales.utils.ts
@@ -0,0 +1,87 @@
+import { SalesQuery, SalesReport, SalesSummaryAmount } from './sales.models'
+
+/** Report column types a date range can be applied to; mirrors the Reports API contract. */
+const dateTypes = ['date', 'datetime']
+
+/** Matches the Created Date column so the portal opens on pipeline generation. */
+const createdDatePattern = /creat/i
+
+export type SalesDateColumn = SalesReport['columns'][number]
+
+/**
+ * Lists the report columns a date range can filter on, such as Created Date and Close Date.
+ * @param report Loaded report, or undefined before the first response.
+ * @returns Date and datetime columns in report order; empty when the report has none.
+ * @throws Does not throw.
+ */
+export function dateColumns(report?: SalesReport): SalesDateColumn[] {
+    return (report?.columns ?? []).filter(column => dateTypes.includes(column.dataType))
+}
+
+/**
+ * Chooses the date column the portal starts on, preferring Created Date for pipeline analysis.
+ * @param columns Available date columns, in report order.
+ * @returns The preferred column ID, or an empty string when the report has no date column.
+ * @throws Does not throw.
+ */
+export function defaultDateColumn(columns: SalesDateColumn[]): string {
+    const created = columns.find(column => createdDatePattern.test(column.label))
+    return (created ?? columns[0])?.id ?? ''
+}
+
+/**
+ * Explains why a chosen range cannot be applied, so the request is never sent.
+ * @param column Selected date column ID.
+ * @param from Inclusive lower bound, as a YYYY-MM-DD value from a date input.
+ * @param to Inclusive upper bound, as a YYYY-MM-DD value from a date input.
+ * @returns A message to display, or an empty string when the range is usable.
+ * @throws Does not throw.
+ */
+export function dateRangeError(column: string, from: string, to: string): string {
+    if (!column && (from || to)) return 'Choose the date field this range applies to.'
+    if (from && to && from > to) return 'The From date must be on or before the To date.'
+    return ''
+}
+
+/**
+ * Merges the date range controls into the report query.
+ * @param current Active report query.
+ * @param column Selected date column ID.
+ * @param from Inclusive lower bound.
+ * @param to Inclusive upper bound.
+ * @returns The current query when nothing changed, otherwise a new query reset to page one. Does not throw.
+ */
+export function withDateRange(current: SalesQuery, column: string, from: string, to: string): SalesQuery {
+    // The column alone never filters, so it is only sent once a bound is set.
+    const ranged = !!column && !!(from || to)
+    const next = {
+        dateColumn: ranged ? column : undefined,
+        dateFrom: ranged && from ? from : undefined,
+        dateTo: ranged && to ? to : undefined,
+    }
+    if (
+        next.dateColumn === current.dateColumn
+        && next.dateFrom === current.dateFrom
+        && next.dateTo === current.dateTo
+    ) {
+        return current
+    }
+
+    return { ...current, ...next, page: 1 }
+}
+
+/**
+ * Formats a snapshot-wide total for display, using the currency the matching rows agree on.
+ * @param amount Summary entry for one numeric column.
+ * @returns A localized currency amount, or a plain number when the rows mix currencies.
+ * @throws Does not throw for an unexpected currency code; falls back to a plain number.
+ */
+export function formatSummaryAmount(amount: SalesSummaryAmount): string {
+    try {
+        return amount.total.toLocaleString(undefined, amount.currencyCode
+            ? { currency: amount.currencyCode, maximumFractionDigits: 0, style: 'currency' }
+            : { maximumFractionDigits: 0 })
+    } catch {
+        return amount.total.toLocaleString(undefined, { maximumFractionDigits: 0 })
+    }
+}

From 1097352a44938dedd145f1ae2adb8c1da94cfdc6 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Fri, 18 Sep 2026 05:51:45 +1000
Subject: [PATCH 20/22] fix(opportunities): render Marathon Match dashboards
 above the Highcharts turbo threshold

The Dashboard tab drew an empty plot area on larger Marathon Matches. The
scatter series passes keyed point configs ({ x, y, name, color, custom }),
but Highcharts switches to turbo mode once a series exceeds
`turboThreshold` (default 1000). Turbo mode only accepts numeric or array
point configs, so it discarded every point, logged error #12, and left the
chart blank with no visible failure.

Challenge e53d30e9-c4b1-40bc-b834-f92483a73223 graphs 1100 points from
1882 review summations, just past the default limit. community-app's
equivalent graph already sets `turboThreshold: 0`, which is why the same
challenge renders there.

Disable the threshold to match community-app, and cover it with a
regression test that renders 1200 points through real Highcharts.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/components/MarathonDashboard.spec.tsx | 50 +++++++++++++++++++
 .../src/components/MarathonDashboard.tsx      |  6 +++
 2 files changed, 56 insertions(+)

diff --git a/src/apps/opportunities/src/components/MarathonDashboard.spec.tsx b/src/apps/opportunities/src/components/MarathonDashboard.spec.tsx
index 999635ff7..0c7d37630 100644
--- a/src/apps/opportunities/src/components/MarathonDashboard.spec.tsx
+++ b/src/apps/opportunities/src/components/MarathonDashboard.spec.tsx
@@ -70,6 +70,56 @@ describe('MarathonDashboard', () => {
             .toBeInTheDocument()
     })
 
+    it('graphs every point on Marathon Matches larger than the Highcharts turbo threshold', async () => {
+        // Highcharts drops keyed point configs above its default 1000-point
+        // turbo threshold, which left large Marathon Matches with an empty
+        // chart. Production challenges reach ~1100 graphed submissions.
+        const summations = Array.from({ length: 1200 }, (_value, index) => ({
+            aggregateScore: 40 + (index % 50),
+            createdAt: new Date(Date.UTC(2026, 0, 13) + index * 60000)
+                .toISOString(),
+            id: `summation-${index}`,
+            isPassing: true,
+            isProvisional: true,
+            submissionId: `submission-${index}`,
+            submitterHandle: `coder${index % 60}`,
+            submitterId: index % 60,
+            submitterMaxRating: 1500,
+        }))
+        mockedGetReviewSummations.mockResolvedValue(summations)
+
+        render(
+            <SWRConfig value={{ dedupingInterval: 0, provider: () => new Map() }}>
+                <MarathonDashboard
+                    challenge={{ id: 'large-mm', name: 'MM', type: 'Marathon Match' }}
+                />
+            </SWRConfig>,
+        )
+
+        expect(await screen.findByRole('heading', { name: 'Challenge Activity' }))
+            .toBeInTheDocument()
+        const options = JSON.parse(
+            screen.getByTestId('marathon-chart')
+                .getAttribute('data-options') as string,
+        )
+        expect(options.series[0].turboThreshold)
+            .toBe(0)
+        expect(options.series[0].data)
+            .toHaveLength(1200)
+
+        // Prove the configuration renders: without turboThreshold Highcharts
+        // discards the series and silently draws an empty plot area.
+        const highcharts = jest.requireActual('highcharts')
+        const container = document.createElement('div')
+        document.body.appendChild(container)
+        const chart = highcharts.chart(container, {
+            chart: { animation: false, type: 'scatter' },
+            series: options.series,
+        })
+        expect(chart.series[0].yData)
+            .toHaveLength(1200)
+    })
+
     it('shows one stable error state without automatically retrying a missing score feed', async () => {
         mockedGetReviewSummations.mockRejectedValueOnce(new Error('Unauthorized'))
 
diff --git a/src/apps/opportunities/src/components/MarathonDashboard.tsx b/src/apps/opportunities/src/components/MarathonDashboard.tsx
index d639717c4..cfe08db4f 100644
--- a/src/apps/opportunities/src/components/MarathonDashboard.tsx
+++ b/src/apps/opportunities/src/components/MarathonDashboard.tsx
@@ -100,6 +100,12 @@ export const MarathonDashboard: FC<MarathonDashboardProps> = props => {
         series: [{
             data: points,
             name: 'Submissions',
+            // Marathon Matches routinely graph more than Highcharts' default
+            // 1000-point turbo threshold. Turbo mode only accepts numeric or
+            // array point configs, so it discards these keyed points and
+            // silently renders an empty chart. community-app disables the
+            // threshold for the same dashboard.
+            turboThreshold: 0,
             type: 'scatter',
         }],
         title: { text: undefined },

From 6a25f44dd3befaa7547d3fb141544a932ff292cd Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Fri, 18 Sep 2026 06:09:35 +1000
Subject: [PATCH 21/22] PM-6363: Import project details from a Salesforce
 opportunity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Work app — Edit Project Details:
- Adds a Salesforce Opportunity ID field. A valid id is looked up through
  projects-api-v6 and populates Customer (Subcontracting End Customer), SMU
  (Reporting SMU) and Deal Close Date, leaving fields Salesforce does not
  supply untouched. Reopening a linked project shows the link without
  overwriting details that were edited by hand afterwards.
- Shows a "View in Salesforce" link once the opportunity resolves, opening the
  record in a new tab.

Sales app:
- Report cells carrying a Salesforce opportunity id render the opportunity name
  as a button that opens a popup showing the description first, then customer,
  SMU, close date and stage, plus a link to the record. The popup closes with
  its Close button or the X icon.

SMU options are renamed to the Salesforce codes (APME, EURP, AMR1, AMR2) so the
imported Reporting SMU matches the dropdown. Projects saved with the previous
labels render and save as the current option.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/apps/sales/README.md                      |  16 +-
 .../sales/src/OpportunityModal.module.scss    |  60 +++++++
 src/apps/sales/src/OpportunityModal.tsx       | 117 ++++++++++++++
 src/apps/sales/src/SalesPage.module.scss      |   2 +
 src/apps/sales/src/SalesPage.spec.tsx         |  79 ++++++++-
 src/apps/sales/src/SalesPage.tsx              |  44 ++++-
 src/apps/sales/src/opportunity.service.ts     |  44 +++++
 src/apps/sales/src/sales.models.ts            |  17 ++
 .../ShowcasePostDetails.spec.tsx              |   3 +-
 .../ShowcasePostDetails.tsx                   |   3 +-
 .../form/ProjectMetadataFields.module.scss    |  22 +++
 .../components/form/ProjectMetadataFields.tsx | 152 +++++++++++++++++-
 .../src/lib/constants/salesforce.constants.ts |  15 ++
 .../src/lib/constants/showcase.constants.ts   |  31 +++-
 src/apps/work/src/lib/models/Project.model.ts |   2 +
 .../lib/schemas/project-metadata.schema.ts    |  15 +-
 src/apps/work/src/lib/services/index.ts       |   1 +
 .../salesforce-opportunities.service.ts       |  52 ++++++
 .../ProjectEditorForm.spec.tsx                | 110 ++++++++++++-
 .../ProjectEditorForm/ProjectEditorForm.tsx   |   8 +-
 .../ProjectShowcasePage.spec.tsx              |   8 +-
 .../ProjectShowcasePage.tsx                   |   3 +-
 22 files changed, 779 insertions(+), 25 deletions(-)
 create mode 100644 src/apps/sales/src/OpportunityModal.module.scss
 create mode 100644 src/apps/sales/src/OpportunityModal.tsx
 create mode 100644 src/apps/sales/src/opportunity.service.ts
 create mode 100644 src/apps/work/src/lib/components/form/ProjectMetadataFields.module.scss
 create mode 100644 src/apps/work/src/lib/constants/salesforce.constants.ts
 create mode 100644 src/apps/work/src/lib/services/salesforce-opportunities.service.ts

diff --git a/src/apps/sales/README.md b/src/apps/sales/README.md
index 321b259e6..1a15c71a9 100644
--- a/src/apps/sales/README.md
+++ b/src/apps/sales/README.md
@@ -1,13 +1,21 @@
-# Sales (PM-6343)
+# Sales (PM-6343, PM-6363)
 
 Read-only Salesforce reporting for Administrators and Talent Managers. Available
 at `sales.topcoder.com` / `sales.topcoder-dev.com`, `/sales` on the combined host,
 and the **Sales** tab inside Work (`/sales` on the Work host, `/work/sales` on the
 combined host). Route guards and the Reports API independently enforce access.
 
-The page calls `GET {REPORTS_API}/sales` with the signed-in user's token. All
-Salesforce credentials stay in `reports-api-v6`. No create, update, delete,
-export, machine credentials or direct Salesforce API calls exist in the UI.
+The page calls `GET {REPORTS_API}/sales` with the signed-in user's token, and
+`GET {API.V6}/projects/salesforce/opportunities/{id}` for the opportunity popup.
+All Salesforce credentials stay in `reports-api-v6` and `projects-api-v6`. No
+create, update, delete, export, machine credentials or direct Salesforce API
+calls exist in the UI.
+
+Report cells whose value is a Salesforce opportunity id (the `006` key prefix)
+render the opportunity name as a button. Opening it shows a popup with the
+opportunity description first, followed by the customer, SMU, close date and
+stage when Salesforce provides them, plus a link to the record. The popup closes
+with its Close button or the X icon; obsolete lookups are aborted.
 
 Report metadata determines every displayed column, including grouped Stage.
 Search and column substring filters apply automatically as the user types (debounced); headers sort globally
diff --git a/src/apps/sales/src/OpportunityModal.module.scss b/src/apps/sales/src/OpportunityModal.module.scss
new file mode 100644
index 000000000..37b3c02dc
--- /dev/null
+++ b/src/apps/sales/src/OpportunityModal.module.scss
@@ -0,0 +1,60 @@
+@import '@libs/ui/styles/2026/tokens';
+
+.body {
+    display: block;
+}
+
+.state {
+    padding: 40px 0;
+    min-height: 140px;
+    position: relative;
+}
+
+.error {
+    border: 1px solid $tc-2026-danger;
+    border-radius: $tc-2026-radius-md;
+    color: $tc-2026-danger;
+    padding: 16px;
+}
+
+.sectionTitle {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: $tc-2026-muted;
+}
+
+.description {
+    margin-top: 8px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.details {
+    margin-top: 24px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 16px;
+}
+
+.detail dt {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: $tc-2026-muted;
+}
+
+.detail dd {
+    margin-top: 4px;
+    overflow-wrap: anywhere;
+}
+
+.link {
+    display: inline-block;
+    margin-top: 24px;
+    font-weight: 700;
+    color: $tc-2026-teal;
+    text-decoration: underline;
+}
diff --git a/src/apps/sales/src/OpportunityModal.tsx b/src/apps/sales/src/OpportunityModal.tsx
new file mode 100644
index 000000000..cfdf38973
--- /dev/null
+++ b/src/apps/sales/src/OpportunityModal.tsx
@@ -0,0 +1,117 @@
+/* The modal body renders only the opportunity fields the report already exposes. */
+import { FC, useEffect, useState } from 'react'
+
+import { BaseModal, Button, LoadingSpinner } from '~/libs/ui'
+
+import {
+    fetchOpportunity,
+    opportunityErrorMessage,
+    SalesOpportunity,
+} from './opportunity.service'
+import styles from './OpportunityModal.module.scss'
+
+export interface OpportunityModalProps {
+    /** Salesforce opportunity id taken from the report cell. */
+    opportunityId: string
+    /** Opportunity name shown while the details are still loading. */
+    opportunityName: string
+    onClose: () => void
+    open: boolean
+}
+
+type ModalState =
+    | { status: 'loading' }
+    | { status: 'error'; message: string }
+    | { status: 'ready'; opportunity: SalesOpportunity }
+
+/**
+ * Shows the details of one Salesforce opportunity, starting with its description.
+ * @param props The opportunity to load, whether the popup is open, and the close handler.
+ * @returns A dialog closed with either the Close button or the X icon.
+ * @throws Does not throw request failures; shows the sanitized message inline.
+ */
+export const OpportunityModal: FC<OpportunityModalProps> = props => {
+    const [state, setState] = useState<ModalState>({ status: 'loading' })
+
+    useEffect(() => {
+        if (!props.open) {
+            return undefined
+        }
+
+        const controller = new AbortController()
+        setState({ status: 'loading' })
+        fetchOpportunity(props.opportunityId, controller.signal)
+            .then(opportunity => {
+                if (!controller.signal.aborted) {
+                    setState({ opportunity, status: 'ready' })
+                }
+            })
+            .catch(error => {
+                if (!controller.signal.aborted) {
+                    setState({ message: opportunityErrorMessage(error), status: 'error' })
+                }
+            })
+
+        return () => controller.abort()
+    }, [props.open, props.opportunityId])
+
+    const opportunity = state.status === 'ready' ? state.opportunity : undefined
+    const details: Array<{ label: string; value: string | undefined }> = [
+        { label: 'Customer', value: opportunity?.customer },
+        { label: 'SMU', value: opportunity?.reportingSmu },
+        { label: 'Close Date', value: opportunity?.closeDate },
+        { label: 'Stage', value: opportunity?.stageName },
+    ].filter(item => !!item.value)
+
+    return (
+        <BaseModal
+            bodyClassName={styles.body}
+            buttons={(
+                <Button noCaps onClick={props.onClose} secondary>Close</Button>
+            )}
+            onClose={props.onClose}
+            open={props.open}
+            size='md'
+            title={opportunity?.name || props.opportunityName}
+        >
+            {state.status === 'loading' && (
+                <div className={styles.state}><LoadingSpinner message='Loading opportunity details…' /></div>
+            )}
+
+            {state.status === 'error' && (
+                <div className={styles.error} role='alert'>{state.message}</div>
+            )}
+
+            {opportunity && (
+                <>
+                    <h3 className={styles.sectionTitle}>Description</h3>
+                    <p className={styles.description}>
+                        {opportunity.description || 'This opportunity does not have a description yet.'}
+                    </p>
+
+                    {details.length > 0 && (
+                        <dl className={styles.details}>
+                            {details.map(item => (
+                                <div className={styles.detail} key={item.label}>
+                                    <dt>{item.label}</dt>
+                                    <dd>{item.value}</dd>
+                                </div>
+                            ))}
+                        </dl>
+                    )}
+
+                    <a
+                        className={styles.link}
+                        href={opportunity.url}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        View in Salesforce
+                    </a>
+                </>
+            )}
+        </BaseModal>
+    )
+}
+
+export default OpportunityModal
diff --git a/src/apps/sales/src/SalesPage.module.scss b/src/apps/sales/src/SalesPage.module.scss
index 83de541e5..f6bc8d41b 100644
--- a/src/apps/sales/src/SalesPage.module.scss
+++ b/src/apps/sales/src/SalesPage.module.scss
@@ -48,6 +48,8 @@
 .table th button:hover { color: $tc-2026-teal; }
 .table td { border-bottom: 1px solid $tc-2026-border; padding: 16px 20px; min-width: 140px; max-width: 420px; overflow-wrap: anywhere; vertical-align: top; }
 .table tr:last-child td { border-bottom: 0; }
+.opportunityButton { padding: 0; border: 0; background: transparent; text-align: left; color: $tc-2026-teal; font-weight: 700; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
+.opportunityButton:hover, .opportunityButton:focus-visible { color: $tc-2026-body; }
 .table tbody tr:hover { background: $tc-2026-canvas; }
 .pagination { padding: 20px 24px; border-top: 1px solid $tc-2026-border; flex-wrap: wrap; font-size: 13px; }
 .pageControls { flex-wrap: wrap; gap: 12px; }
diff --git a/src/apps/sales/src/SalesPage.spec.tsx b/src/apps/sales/src/SalesPage.spec.tsx
index c51c352e3..621104511 100644
--- a/src/apps/sales/src/SalesPage.spec.tsx
+++ b/src/apps/sales/src/SalesPage.spec.tsx
@@ -4,6 +4,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { ButtonHTMLAttributes, ReactNode } from 'react'
 
 import SalesPage from './SalesPage'
+import { fetchOpportunity } from './opportunity.service'
 import { SalesReport } from './sales.models'
 import { fetchSalesReport } from './sales.service'
 
@@ -12,7 +13,21 @@ jest.mock('./sales.service', () => ({
     salesErrorMessage: () => 'Unable to refresh. Please try again.',
 }))
 
+jest.mock('./opportunity.service', () => ({
+    fetchOpportunity: jest.fn(),
+    opportunityErrorMessage: () => 'We could not load the opportunity details. Please try again.',
+}))
+
 jest.mock('~/libs/ui', () => ({
+    BaseModal: (props: { buttons?: ReactNode; children: ReactNode; open: boolean; title: ReactNode }) => (
+        props.open ? (
+            <div role='dialog'>
+                <h2>{props.title}</h2>
+                {props.children}
+                {props.buttons}
+            </div>
+        ) : undefined
+    ),
     Button: (props: ButtonHTMLAttributes<HTMLButtonElement>) => (
         <button disabled={props.disabled} onClick={props.onClick} type={props.type === 'submit' ? 'submit' : 'button'}>
             {props.children}
@@ -24,6 +39,7 @@ jest.mock('~/libs/ui', () => ({
 }), { virtual: true })
 
 const fetchReport = fetchSalesReport as jest.MockedFunction<typeof fetchSalesReport>
+const fetchOpportunityDetails = fetchOpportunity as jest.MockedFunction<typeof fetchOpportunity>
 
 /** Creates non-customer Sales test data. @returns A synthetic report page. Does not throw. */
 function fixture(): SalesReport {
@@ -44,8 +60,11 @@ function fixture(): SalesReport {
 }
 
 describe('Sales page', () => {
-    beforeEach(() => fetchReport.mockReset()
-        .mockResolvedValue(fixture()))
+    beforeEach(() => {
+        fetchOpportunityDetails.mockReset()
+        fetchReport.mockReset()
+            .mockResolvedValue(fixture())
+    })
 
     it('renders live metadata and sends search, column filters, sorting and pagination to the API', async () => {
         render(<SalesPage />)
@@ -158,4 +177,60 @@ describe('Sales page', () => {
         visibility.mockRestore()
         jest.useRealTimers()
     })
+
+    it('opens the opportunity description in a popup and closes it again', async () => {
+        fetchReport.mockResolvedValue({
+            ...fixture(),
+            rows: [{
+                cells: [{ label: 'EMEA - AWS - PS BFSI', value: '006UN00000XamntYAB' }],
+                id: '0:0',
+            }],
+        })
+        fetchOpportunityDetails.mockResolvedValue({
+            closeDate: '2026-07-31',
+            description: 'Next AWS MVP for the BFSI practice.',
+            id: '006UN00000XamntYAB',
+            name: 'EMEA - AWS - PS BFSI',
+            url: 'https://topcoder.my.salesforce.com/006UN00000XamntYAB',
+        })
+
+        render(<SalesPage />)
+        fireEvent.click(await screen.findByRole('button', { name: 'EMEA - AWS - PS BFSI' }))
+
+        expect(fetchOpportunityDetails)
+            .toHaveBeenCalledWith('006UN00000XamntYAB', expect.any(AbortSignal))
+        expect(await screen.findByText('Next AWS MVP for the BFSI practice.'))
+            .toBeInTheDocument()
+        expect(screen.getByRole('link', { name: 'View in Salesforce' }))
+            .toHaveAttribute('href', 'https://topcoder.my.salesforce.com/006UN00000XamntYAB')
+
+        fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    })
+
+    it('explains a failed opportunity lookup inside the popup', async () => {
+        fetchReport.mockResolvedValue({
+            ...fixture(),
+            rows: [{
+                cells: [{ label: 'EMEA - AWS - PS BFSI', value: '006UN00000XamntYAB' }],
+                id: '0:0',
+            }],
+        })
+        fetchOpportunityDetails.mockRejectedValue({ response: { status: 404 } })
+
+        render(<SalesPage />)
+        fireEvent.click(await screen.findByRole('button', { name: 'EMEA - AWS - PS BFSI' }))
+
+        expect(await screen.findByRole('alert'))
+            .toHaveTextContent('We could not load the opportunity details. Please try again.')
+    })
+
+    it('leaves cells that do not carry an opportunity id as plain text', async () => {
+        render(<SalesPage />)
+        await screen.findByText('Example opportunity')
+
+        expect(screen.queryByRole('button', { name: 'Example opportunity' }))
+            .not
+            .toBeInTheDocument()
+    })
 })
diff --git a/src/apps/sales/src/SalesPage.tsx b/src/apps/sales/src/SalesPage.tsx
index 31b9cf32d..114056eac 100644
--- a/src/apps/sales/src/SalesPage.tsx
+++ b/src/apps/sales/src/SalesPage.tsx
@@ -6,7 +6,8 @@ import { FC, FormEvent, useCallback, useEffect, useRef, useState } from 'react'
 
 import { Button, IconOutline, LoadingSpinner, PageTitle } from '~/libs/ui'
 
-import { SalesQuery, SalesReport } from './sales.models'
+import { OpportunityModal } from './OpportunityModal'
+import { SalesQuery, SalesReport, toOpportunityId } from './sales.models'
 import { fetchSalesReport, salesErrorMessage } from './sales.service'
 import styles from './SalesPage.module.scss'
 import './sales.scss'
@@ -14,6 +15,11 @@ import './sales.scss'
 const initialQuery: SalesQuery = { page: 1, perPage: 25 }
 const filterDebounceMs = 400
 
+interface SelectedOpportunity {
+    id: string
+    name: string
+}
+
 /**
  * Merges search and column filter controls into the report query.
  * @param current Active report query.
@@ -54,6 +60,7 @@ const SalesPage: FC = () => {
     const [error, setError] = useState('')
     const [loading, setLoading] = useState(true)
     const [refreshVersion, setRefreshVersion] = useState(0)
+    const [openedOpportunity, setOpenedOpportunity] = useState<SelectedOpportunity>()
     const forceRefresh = useRef(false)
     const busy = useRef(false)
 
@@ -304,11 +311,27 @@ const SalesPage: FC = () => {
                                 <tbody>
                                     {report.rows.map(row => (
                                         <tr key={row.id}>
-                                            {row.cells.map((cell, index) => (
-                                                <td key={report.columns[index].id}>
-                                                    {cell.label || '—'}
-                                                </td>
-                                            ))}
+                                            {row.cells.map((cell, index) => {
+                                                const opportunityId = toOpportunityId(cell.value)
+                                                const label = cell.label || '—'
+
+                                                return (
+                                                    <td key={report.columns[index].id}>
+                                                        {opportunityId && cell.label ? (
+                                                            <button
+                                                                className={styles.opportunityButton}
+                                                                onClick={() => setOpenedOpportunity({
+                                                                    id: opportunityId,
+                                                                    name: label,
+                                                                })}
+                                                                type='button'
+                                                            >
+                                                                {label}
+                                                            </button>
+                                                        ) : label}
+                                                    </td>
+                                                )
+                                            })}
                                         </tr>
                                     ))}
                                 </tbody>
@@ -362,6 +385,15 @@ const SalesPage: FC = () => {
                     </>
                 )}
             </section>
+
+            {openedOpportunity && (
+                <OpportunityModal
+                    onClose={() => setOpenedOpportunity(undefined)}
+                    open
+                    opportunityId={openedOpportunity.id}
+                    opportunityName={openedOpportunity.name}
+                />
+            )}
         </div>
     )
 }
diff --git a/src/apps/sales/src/opportunity.service.ts b/src/apps/sales/src/opportunity.service.ts
new file mode 100644
index 000000000..31b979aec
--- /dev/null
+++ b/src/apps/sales/src/opportunity.service.ts
@@ -0,0 +1,44 @@
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+export interface SalesOpportunity {
+    id: string
+    name: string
+    description?: string
+    customer?: string
+    smu?: string
+    reportingSmu?: string
+    closeDate?: string
+    stageName?: string
+    url: string
+}
+
+/**
+ * Reads a Salesforce opportunity through the role-protected Projects API.
+ * @param opportunityId Salesforce opportunity id taken from a report cell.
+ * @param signal Cancels the request when the popup closes or another row is opened.
+ * @returns The opportunity details shown in the popup.
+ * @throws Propagates network, authorization and sanitized Projects API errors.
+ */
+export function fetchOpportunity(
+    opportunityId: string,
+    signal?: AbortSignal,
+): Promise<SalesOpportunity> {
+    const url = `${EnvironmentConfig.API.V6}/projects/salesforce/opportunities/${encodeURIComponent(opportunityId)}`
+    return xhrGetAsync<SalesOpportunity>(url, undefined, { signal })
+}
+
+/**
+ * Explains an opportunity lookup failure without exposing transport internals.
+ * @param error Unknown request rejection.
+ * @returns User-facing recovery guidance shown inside the popup.
+ * @throws Does not throw.
+ */
+export function opportunityErrorMessage(error: unknown): string {
+    const status = (error as { response?: { status?: number } })?.response?.status
+    if (status === 401) return 'Your session has expired. Sign in again to view opportunity details.'
+    if (status === 403) return 'You do not have permission to read Salesforce opportunities.'
+    if (status === 404) return 'This opportunity is no longer available in Salesforce.'
+    if (status === 503) return 'The Salesforce connection is not configured yet. Contact your administrator.'
+    return 'We could not load the opportunity details. Please try again.'
+}
diff --git a/src/apps/sales/src/sales.models.ts b/src/apps/sales/src/sales.models.ts
index 41664ddc7..3b2b39513 100644
--- a/src/apps/sales/src/sales.models.ts
+++ b/src/apps/sales/src/sales.models.ts
@@ -27,3 +27,20 @@ export interface SalesQuery {
     sortOrder?: 'asc' | 'desc'
     refresh?: boolean
 }
+
+/**
+ * Salesforce opportunity record ids: the `006` key prefix followed by 12 or 15
+ * case-sensitive alphanumeric characters. Report cells carrying the opportunity
+ * name expose this id as their value.
+ */
+const OPPORTUNITY_ID_PATTERN = /^006[a-zA-Z0-9]{12}(?:[a-zA-Z0-9]{3})?$/
+
+/**
+ * Detects the report cell value that identifies a Salesforce opportunity.
+ * @param value Raw cell value from the sales report.
+ * @returns The opportunity id when the cell carries one, otherwise undefined.
+ * @throws Does not throw.
+ */
+export function toOpportunityId(value: string | number | boolean | null): string | undefined {
+    return typeof value === 'string' && OPPORTUNITY_ID_PATTERN.test(value) ? value : undefined
+}
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
index 582b1a5ad..b4baa0d40 100644
--- a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.spec.tsx
@@ -46,7 +46,8 @@ describe('Showcase post details', () => {
         view.rerender(<ShowcasePostDetails data={{ owner: 'oww', smu: 'Americas1' }} />)
         expect(screen.getByText('SMU'))
             .toBeInTheDocument()
-        expect(screen.getByText('Americas1'))
+        // Projects stored before the Salesforce naming alignment render the current label.
+        expect(screen.getByText('AMR1'))
             .toBeInTheDocument()
         expect(screen.getByText('Owner'))
             .toBeInTheDocument()
diff --git a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
index bd2e999cf..337f40b3f 100644
--- a/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
+++ b/src/apps/work/src/lib/components/ShowcasePostDetails/ShowcasePostDetails.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 
 import { textFormatDateLocaleShortString } from '~/libs/shared/lib/utils/text-format'
 
+import { normalizeSmuValue } from '../../constants/showcase.constants'
 import { ShowcaseMetadata } from '../../models/ProjectShowcasePost.model'
 
 import styles from './ShowcasePostDetails.module.scss'
@@ -47,7 +48,7 @@ function formatDealCloseDate(value: string | undefined): string | undefined {
 export function getShowcaseDetailItems(data: ShowcaseMetadata): ShowcasePostDetailItem[] {
     const smu = data.smu === 'Others'
         ? data.smuOther?.trim() || data.smu
-        : data.smu
+        : normalizeSmuValue(data.smu)
 
     return [
         { label: 'Type', value: data.type },
diff --git a/src/apps/work/src/lib/components/form/ProjectMetadataFields.module.scss b/src/apps/work/src/lib/components/form/ProjectMetadataFields.module.scss
new file mode 100644
index 000000000..aa190f150
--- /dev/null
+++ b/src/apps/work/src/lib/components/form/ProjectMetadataFields.module.scss
@@ -0,0 +1,22 @@
+@import '@libs/ui/styles/includes';
+
+.opportunityStatus {
+    color: $black-60;
+    font-size: 12px;
+    line-height: 1.5;
+    margin-top: -4px;
+}
+
+.opportunityError {
+    color: $red-100;
+}
+
+.opportunityLink {
+    color: $blue-100;
+    font-weight: 500;
+    text-decoration: underline;
+}
+
+.opportunityName {
+    color: $black-80;
+}
diff --git a/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx b/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
index 5b35ea6cc..8de38e1e4 100644
--- a/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
+++ b/src/apps/work/src/lib/components/form/ProjectMetadataFields.tsx
@@ -1,28 +1,176 @@
-import { FC } from 'react'
+import {
+    FC,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
 import { useFormContext } from 'react-hook-form'
+import classNames from 'classnames'
 
+import { isSalesforceOpportunityId } from '../../constants/salesforce.constants'
 import { SMU_VALUES } from '../../constants/showcase.constants'
+import {
+    fetchSalesforceOpportunity,
+    SalesforceOpportunity,
+    salesforceOpportunityErrorMessage,
+} from '../../services/salesforce-opportunities.service'
 
 import { FormSelectField } from './FormSelectField'
 import { FormTextField } from './FormTextField'
+import styles from './ProjectMetadataFields.module.scss'
+
+const lookupDebounceMs = 400
 
 interface ProjectMetadataFieldsProps {
     className?: string
     required?: boolean
+    /** Enables the Salesforce Opportunity ID lookup that populates the fields below. */
+    showSalesforceOpportunity?: boolean
 }
 
+type LookupState =
+    | { status: 'idle' }
+    | { status: 'loading' }
+    | { status: 'error'; message: string }
+    | { status: 'ready'; opportunity: SalesforceOpportunity }
+
 /**
  * Renders the shared Customer, SMU and Deal Close Date fields in both project forms.
- * @param props Optional field styling and whether showcase metadata is required.
+ * @param props Optional field styling, whether showcase metadata is required, and
+ * whether the Salesforce Opportunity ID lookup is offered.
  * @returns Fields bound to the surrounding React Hook Form, including custom SMU input.
  * @throws Requires a parent FormProvider, like the other work form controls.
  */
 export const ProjectMetadataFields: FC<ProjectMetadataFieldsProps> = props => {
     const formContext = useFormContext()
     const smu = formContext.watch('smu')
+    const opportunityId = formContext.watch('salesforceOpportunityId')
+    const [lookup, setLookup] = useState<LookupState>({ status: 'idle' })
+    // Populating the fields is a response to typing, so reopening a linked
+    // project never overwrites details that were edited by hand afterwards.
+    const enteredByUser = useRef(false)
+
+    const setValue = formContext.setValue
+
+    const applyOpportunity = useCallback(
+        (opportunity: SalesforceOpportunity): void => {
+            const options = { shouldDirty: true, shouldValidate: true }
+
+            if (opportunity.customer) {
+                setValue('customer', opportunity.customer, options)
+            }
+
+            if (opportunity.smu) {
+                setValue('smu', opportunity.smu, options)
+                setValue(
+                    'smuOther',
+                    opportunity.smu === 'Others' ? opportunity.smuOther || '' : '',
+                    options,
+                )
+            }
+
+            if (opportunity.closeDate) {
+                setValue('dealCloseDate', opportunity.closeDate, options)
+            }
+        },
+        [setValue],
+    )
+
+    useEffect(() => {
+        if (!props.showSalesforceOpportunity) {
+            return undefined
+        }
+
+        const trimmedId = (opportunityId || '').trim()
+        if (!trimmedId || !isSalesforceOpportunityId(trimmedId)) {
+            setLookup({ status: 'idle' })
+            return undefined
+        }
+
+        const controller = new AbortController()
+        const timer = window.setTimeout(() => {
+            setLookup({ status: 'loading' })
+            fetchSalesforceOpportunity(trimmedId, controller.signal)
+                .then(opportunity => {
+                    if (controller.signal.aborted) {
+                        return
+                    }
+
+                    setLookup({ opportunity, status: 'ready' })
+
+                    if (enteredByUser.current) {
+                        applyOpportunity(opportunity)
+                    }
+                })
+                .catch(error => {
+                    if (controller.signal.aborted) {
+                        return
+                    }
+
+                    setLookup({
+                        message: salesforceOpportunityErrorMessage(error),
+                        status: 'error',
+                    })
+                })
+        }, lookupDebounceMs)
+
+        return () => {
+            window.clearTimeout(timer)
+            controller.abort()
+        }
+    }, [applyOpportunity, opportunityId, props.showSalesforceOpportunity])
+
+    /** @param value Raw field input. @returns Nothing; marks the id as user-entered. Does not throw. */
+    function handleOpportunityIdChange(): void {
+        enteredByUser.current = true
+    }
 
     return (
         <>
+            {props.showSalesforceOpportunity && (
+                <>
+                    <FormTextField
+                        className={props.className}
+                        hint='Populates Customer, SMU and Deal Close Date from the Salesforce opportunity.'
+                        label='Salesforce Opportunity ID'
+                        maxLength={18}
+                        name='salesforceOpportunityId'
+                        onChange={handleOpportunityIdChange}
+                        placeholder='006XXXXXXXXXXXXXXX'
+                    />
+                    {lookup.status !== 'idle' && (
+                        <div
+                            aria-live='polite'
+                            className={classNames(
+                                props.className,
+                                styles.opportunityStatus,
+                                lookup.status === 'error' ? styles.opportunityError : undefined,
+                            )}
+                        >
+                            {lookup.status === 'loading' && 'Looking up the Salesforce opportunity…'}
+                            {lookup.status === 'error' && lookup.message}
+                            {lookup.status === 'ready' && (
+                                <>
+                                    <a
+                                        className={styles.opportunityLink}
+                                        href={lookup.opportunity.url}
+                                        rel='noopener noreferrer'
+                                        target='_blank'
+                                    >
+                                        View in Salesforce
+                                    </a>
+                                    {lookup.opportunity.name && (
+                                        <span className={styles.opportunityName}>
+                                            {` — ${lookup.opportunity.name}`}
+                                        </span>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
             <FormTextField
                 className={props.className}
                 label='Customer'
diff --git a/src/apps/work/src/lib/constants/salesforce.constants.ts b/src/apps/work/src/lib/constants/salesforce.constants.ts
new file mode 100644
index 000000000..e6e94c892
--- /dev/null
+++ b/src/apps/work/src/lib/constants/salesforce.constants.ts
@@ -0,0 +1,15 @@
+/**
+ * Salesforce opportunity record ids: the `006` key prefix followed by 12 or 15
+ * case-sensitive alphanumeric characters.
+ */
+export const SALESFORCE_OPPORTUNITY_ID_PATTERN = /^006[a-zA-Z0-9]{12}(?:[a-zA-Z0-9]{3})?$/
+
+/**
+ * Checks whether a value can be sent to the opportunity lookup endpoint.
+ * @param opportunityId Raw input from the project form.
+ * @returns True for a 15 or 18 character Salesforce opportunity id.
+ * @throws Does not throw.
+ */
+export function isSalesforceOpportunityId(opportunityId: string | undefined): boolean {
+    return !!opportunityId && SALESFORCE_OPPORTUNITY_ID_PATTERN.test(opportunityId)
+}
diff --git a/src/apps/work/src/lib/constants/showcase.constants.ts b/src/apps/work/src/lib/constants/showcase.constants.ts
index c7f4f98b3..7d11a870f 100644
--- a/src/apps/work/src/lib/constants/showcase.constants.ts
+++ b/src/apps/work/src/lib/constants/showcase.constants.ts
@@ -1,4 +1,33 @@
-export const SMU_VALUES = ['APMEA', 'Europe', 'Americas1', 'Americas2', 'Others']
+/**
+ * SMU options, named to match the Salesforce `Reporting SMU` codes so an
+ * imported opportunity maps onto a project without translation.
+ */
+export const SMU_VALUES = ['APME', 'EURP', 'AMR1', 'AMR2', 'Others']
+
+/**
+ * SMU labels used before the Salesforce naming alignment, mapped to their
+ * current option so existing projects keep rendering a valid selection.
+ */
+export const LEGACY_SMU_VALUES: Readonly<{ [legacyValue: string]: string }> = {
+    Americas1: 'AMR1',
+    Americas2: 'AMR2',
+    APMEA: 'APME',
+    Europe: 'EURP',
+}
+
+/**
+ * Maps a stored SMU label onto a currently supported option.
+ * @param value SMU value loaded from a project or showcase post.
+ * @returns The supported option, or the original value when it is not a legacy label.
+ * @throws Does not throw.
+ */
+export function normalizeSmuValue(value: string | undefined): string {
+    if (!value) {
+        return ''
+    }
+
+    return LEGACY_SMU_VALUES[value] ?? value
+}
 
 export const SHOWCASE_TYPE_VALUES = [
     'Open Innovation',
diff --git a/src/apps/work/src/lib/models/Project.model.ts b/src/apps/work/src/lib/models/Project.model.ts
index 7e440187a..c450a3008 100644
--- a/src/apps/work/src/lib/models/Project.model.ts
+++ b/src/apps/work/src/lib/models/Project.model.ts
@@ -13,6 +13,8 @@ export interface ProjectMetadata {
     smu?: string
     smuOther?: string
     dealCloseDate?: string
+    /** Salesforce opportunity the project details were imported from. */
+    salesforceOpportunityId?: string
 }
 
 export interface ProjectDetails extends Record<string, unknown>, ProjectMetadata {
diff --git a/src/apps/work/src/lib/schemas/project-metadata.schema.ts b/src/apps/work/src/lib/schemas/project-metadata.schema.ts
index 1a1167e9a..d676eeb12 100644
--- a/src/apps/work/src/lib/schemas/project-metadata.schema.ts
+++ b/src/apps/work/src/lib/schemas/project-metadata.schema.ts
@@ -1,6 +1,7 @@
 import * as yup from 'yup'
 
-import { SMU_VALUES } from '../constants/showcase.constants'
+import { SALESFORCE_OPPORTUNITY_ID_PATTERN } from '../constants/salesforce.constants'
+import { LEGACY_SMU_VALUES, SMU_VALUES } from '../constants/showcase.constants'
 
 /**
  * Checks a date-only value without converting its calendar day to a local timezone.
@@ -25,19 +26,29 @@ function isCalendarDate(value: string | undefined): boolean {
 export function projectMetadataSchemaFields(required: boolean): {
     customer: yup.StringSchema<string | undefined>
     dealCloseDate: yup.StringSchema<string | undefined>
+    salesforceOpportunityId: yup.StringSchema<string | undefined>
     smu: yup.StringSchema<string | undefined>
     smuOther: yup.StringSchema<string | undefined>
 } {
     const text = yup.string()
         .trim()
         .max(255)
+    // Projects saved before the Salesforce naming alignment still hold the legacy labels.
     const smu = yup.string()
-        .oneOf([...SMU_VALUES, ''])
+        .oneOf([...SMU_VALUES, ...Object.keys(LEGACY_SMU_VALUES), ''])
     const date = yup.string()
         .test('calendar-date', 'Enter a valid deal close date', isCalendarDate)
     return {
         customer: required ? text.required('Customer is required') : text.optional(),
         dealCloseDate: required ? date.required('Deal Close Date is required') : date.optional(),
+        salesforceOpportunityId: yup.string()
+            .trim()
+            .test(
+                'salesforce-opportunity-id',
+                'Enter a valid 15 or 18 character Salesforce Opportunity ID',
+                value => !value || SALESFORCE_OPPORTUNITY_ID_PATTERN.test(value),
+            )
+            .optional(),
         smu: required ? smu.required('SMU is required') : smu.optional(),
         smuOther: text.when('smu', {
             is: 'Others',
diff --git a/src/apps/work/src/lib/services/index.ts b/src/apps/work/src/lib/services/index.ts
index 4c88e547a..85447b60c 100644
--- a/src/apps/work/src/lib/services/index.ts
+++ b/src/apps/work/src/lib/services/index.ts
@@ -36,6 +36,7 @@ export type {
     ProjectSummary,
 } from './projects.service'
 export * from './resources.service'
+export * from './salesforce-opportunities.service'
 export * from './reviews.service'
 export * from './skills.service'
 export * from './submissions.service'
diff --git a/src/apps/work/src/lib/services/salesforce-opportunities.service.ts b/src/apps/work/src/lib/services/salesforce-opportunities.service.ts
new file mode 100644
index 000000000..1505e1309
--- /dev/null
+++ b/src/apps/work/src/lib/services/salesforce-opportunities.service.ts
@@ -0,0 +1,52 @@
+import { xhrGetAsync } from '~/libs/core'
+
+import { PROJECTS_API_URL } from '../constants'
+
+export interface SalesforceOpportunity {
+    id: string
+    name: string
+    description?: string
+    /** Subcontracting End Customer account name. */
+    customer?: string
+    /** Reporting SMU already mapped onto a supported SMU option. */
+    smu?: string
+    /** Raw Reporting SMU, populated only when `smu` is `Others`. */
+    smuOther?: string
+    reportingSmu?: string
+    /** Close Date as a YYYY-MM-DD calendar date. */
+    closeDate?: string
+    stageName?: string
+    /** Deep link to the opportunity record in Salesforce. */
+    url: string
+}
+
+/**
+ * Reads a Salesforce opportunity through the role-protected Projects API.
+ * @param opportunityId 15 or 18 character Salesforce opportunity id.
+ * @param signal Cancels an obsolete lookup when the input changes or the form unmounts.
+ * @returns The opportunity fields used to populate project details.
+ * @throws Propagates network, authorization and sanitized Projects API errors.
+ */
+export function fetchSalesforceOpportunity(
+    opportunityId: string,
+    signal?: AbortSignal,
+): Promise<SalesforceOpportunity> {
+    const url = `${PROJECTS_API_URL}/salesforce/opportunities/${encodeURIComponent(opportunityId)}`
+    return xhrGetAsync<SalesforceOpportunity>(url, undefined, { signal })
+}
+
+/**
+ * Explains an opportunity lookup failure without exposing transport internals.
+ * @param error Unknown request rejection.
+ * @returns User-facing recovery guidance for the inline field error.
+ * @throws Does not throw.
+ */
+export function salesforceOpportunityErrorMessage(error: unknown): string {
+    const status = (error as { response?: { status?: number } })?.response?.status
+    if (status === 400) return 'Enter a valid 15 or 18 character Salesforce Opportunity ID.'
+    if (status === 401) return 'Your session has expired. Sign in again to look up the opportunity.'
+    if (status === 403) return 'You do not have permission to read Salesforce opportunities.'
+    if (status === 404) return 'No Salesforce opportunity was found for that ID.'
+    if (status === 503) return 'The Salesforce connection is not configured yet. Contact your administrator.'
+    return 'We could not reach Salesforce. Please try again.'
+}
diff --git a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
index c628a8458..c7d7e791f 100644
--- a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
+++ b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.spec.tsx
@@ -14,6 +14,9 @@ import {
     createProject,
     updateProject,
 } from '../../../../../lib/services'
+import {
+    fetchSalesforceOpportunity,
+} from '../../../../../lib/services/salesforce-opportunities.service'
 
 import { ProjectEditorForm } from './ProjectEditorForm'
 
@@ -144,6 +147,11 @@ jest.mock('../../../../../lib/services', () => ({
     updateProject: jest.fn(),
 }))
 
+jest.mock('../../../../../lib/services/salesforce-opportunities.service', () => ({
+    fetchSalesforceOpportunity: jest.fn(),
+    salesforceOpportunityErrorMessage: () => 'We could not reach Salesforce. Please try again.',
+}))
+
 jest.mock('../../../../../lib/utils', () => ({
     formatDate: () => '-',
     showErrorToast: jest.fn(),
@@ -173,6 +181,9 @@ const mockedUseFetchProjectBillingAccount = useFetchProjectBillingAccount as jes
     typeof useFetchProjectBillingAccount
 >
 const mockedCreateProject = createProject as jest.MockedFunction<typeof createProject>
+const mockedFetchSalesforceOpportunity = fetchSalesforceOpportunity as jest.MockedFunction<
+    typeof fetchSalesforceOpportunity
+>
 const mockedUpdateProject = updateProject as jest.MockedFunction<typeof updateProject>
 
 describe('ProjectEditorForm', () => {
@@ -312,16 +323,111 @@ describe('ProjectEditorForm', () => {
             .toBe('Custom')
         fireEvent.change(screen.getByLabelText('Customer'), { target: { value: 'Updated' } })
         fireEvent.keyDown(screen.getByLabelText('SMU'), { code: 'ArrowDown', key: 'ArrowDown' })
-        fireEvent.click(screen.getByText('Europe'))
+        fireEvent.click(screen.getByText('EURP'))
         expect(screen.queryByLabelText(/^Other SMU/))
             .toBeNull()
         fireEvent.click(screen.getByRole('button', { name: 'Save project' }))
         await waitFor(() => expect(mockedUpdateProject)
             .toHaveBeenCalledWith('project-1', expect.objectContaining({
                 details: expect.objectContaining({
-                    customer: 'Updated', dealCloseDate: '2026-09-16', retained: true, smu: 'Europe', smuOther: '',
+                    customer: 'Updated', dealCloseDate: '2026-09-16', retained: true, smu: 'EURP', smuOther: '',
                 }),
             })))
     })
 
+    it('shows the current option for a project saved with a legacy SMU label', () => {
+        render(
+            <MemoryRouter>
+                <ProjectEditorForm
+                    canManage
+                    isEdit
+                    projectDetail={{
+                        description: 'Description',
+                        details: { customer: 'Customer', smu: 'Americas1' },
+                        id: 'project-1',
+                        name: 'Project',
+                        status: 'active',
+                    }}
+                    projectTypes={[]}
+                />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByText('AMR1'))
+            .toBeTruthy()
+    })
+
+    it('populates the shared metadata from a Salesforce opportunity and links to it', async () => {
+        mockedFetchSalesforceOpportunity.mockResolvedValue({
+            closeDate: '2026-07-31',
+            customer: 'Novartis Pharmaceuticals',
+            id: '006UN00000XamntYAB',
+            name: 'EMEA - AWS - PS BFSI',
+            smu: 'AMR1',
+            url: 'https://topcoder.my.salesforce.com/006UN00000XamntYAB',
+        })
+
+        render(
+            <MemoryRouter>
+                <ProjectEditorForm
+                    canManage
+                    isEdit
+                    projectDetail={{
+                        description: 'Description',
+                        details: {},
+                        id: 'project-1',
+                        name: 'Project',
+                        status: 'active',
+                    }}
+                    projectTypes={[]}
+                />
+            </MemoryRouter>,
+        )
+
+        fireEvent.change(screen.getByLabelText(/^Salesforce Opportunity ID/), {
+            target: { value: '006UN00000XamntYAB' },
+        })
+
+        await waitFor(() => expect(mockedFetchSalesforceOpportunity)
+            .toHaveBeenCalledWith('006UN00000XamntYAB', expect.any(AbortSignal)))
+        await waitFor(() => expect((screen.getByLabelText('Customer') as HTMLInputElement).value)
+            .toBe('Novartis Pharmaceuticals'))
+        expect((screen.getByLabelText('Deal Close Date') as HTMLInputElement).value)
+            .toBe('2026-07-31')
+        expect(screen.getByText('AMR1'))
+            .toBeTruthy()
+        expect(screen.getByRole('link', { name: 'View in Salesforce' })
+            .getAttribute('href'))
+            .toBe('https://topcoder.my.salesforce.com/006UN00000XamntYAB')
+    })
+
+    it('does not look up an incomplete Salesforce opportunity ID', async () => {
+        render(
+            <MemoryRouter>
+                <ProjectEditorForm
+                    canManage
+                    isEdit
+                    projectDetail={{
+                        description: 'Description',
+                        details: {},
+                        id: 'project-1',
+                        name: 'Project',
+                        status: 'active',
+                    }}
+                    projectTypes={[]}
+                />
+            </MemoryRouter>,
+        )
+
+        fireEvent.change(screen.getByLabelText(/^Salesforce Opportunity ID/), {
+            target: { value: '006UN000' },
+        })
+
+        await waitFor(() => expect(screen.getByText(/valid 15 or 18 character/))
+            .toBeTruthy())
+        expect(mockedFetchSalesforceOpportunity)
+            .not
+            .toHaveBeenCalled()
+    })
+
 })
diff --git a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
index 283fca6df..8cca35143 100644
--- a/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
+++ b/src/apps/work/src/pages/projects/ProjectEditorPage/components/ProjectEditorForm/ProjectEditorForm.tsx
@@ -16,6 +16,7 @@ import {
     PROJECT_STATUS,
     PROJECT_STATUSES,
 } from '../../../../../lib/constants'
+import { normalizeSmuValue } from '../../../../../lib/constants/showcase.constants'
 import {
     FormBillingAccountAutocomplete,
     FormCheckboxField,
@@ -66,6 +67,7 @@ interface ProjectEditorFormProps {
 
 interface ProjectEditorFormValues {
     customer: string
+    salesforceOpportunityId: string
     smu: string
     smuOther: string
     dealCloseDate: string
@@ -116,7 +118,8 @@ function getDefaultFormValues(
             : true,
         groups,
         name: projectDetail?.name || '',
-        smu: projectDetail?.details?.smu || '',
+        salesforceOpportunityId: projectDetail?.details?.salesforceOpportunityId || '',
+        smu: normalizeSmuValue(projectDetail?.details?.smu),
         smuOther: projectDetail?.details?.smuOther || '',
         status: isEdit
             ? (projectDetail?.status || PROJECT_STATUS.DRAFT)
@@ -382,6 +385,7 @@ export const ProjectEditorForm: FC<ProjectEditorFormProps> = (props: ProjectEdit
                 const projectMetadata = {
                     customer: formData.customer.trim(),
                     dealCloseDate: formData.dealCloseDate,
+                    salesforceOpportunityId: formData.salesforceOpportunityId.trim(),
                     smu: formData.smu,
                     smuOther: formData.smu === 'Others' ? formData.smuOther.trim() : '',
                 }
@@ -568,7 +572,7 @@ export const ProjectEditorForm: FC<ProjectEditorFormProps> = (props: ProjectEdit
                     </div>
 
                     <div className={styles.grid}>
-                        <ProjectMetadataFields />
+                        <ProjectMetadataFields showSalesforceOpportunity />
                     </div>
 
                     <div className={styles.grid}>
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx
index d5520db4d..eadb74eda 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.spec.tsx
@@ -73,6 +73,11 @@ jest.mock('../../../lib/components/form', () => {
         },
     }
 })
+jest.mock('../../../lib/services/salesforce-opportunities.service', () => ({
+    fetchSalesforceOpportunity: jest.fn(),
+    salesforceOpportunityErrorMessage: () => 'We could not reach Salesforce. Please try again.',
+}))
+
 jest.mock('../../../lib/services', () => ({
     createProjectShowcasePost: jest.fn(),
 }))
@@ -144,7 +149,8 @@ describe('Showcase creation', () => {
                 customer: 'Updated customer',
                 dealCloseDate: '2026-09-16',
                 sendToWin: true,
-                smu: 'Europe',
+                // Legacy labels are upgraded to the Salesforce-aligned option on save.
+                smu: 'EURP',
                 type: 'Open Innovation',
             })))
         await waitFor(() => expect(refreshProject)
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
index 7633cf5d7..551947b9c 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
@@ -71,6 +71,7 @@ import type {
 } from '../../../lib/models'
 import { ProjectMetadataFields } from '../../../lib/components/form/ProjectMetadataFields'
 import {
+    normalizeSmuValue,
     SHOWCASE_CURRENT_STATUS_VALUES,
     SHOWCASE_TYPE_VALUES,
 } from '../../../lib/constants/showcase.constants'
@@ -250,7 +251,7 @@ function mapPostToFormData(
         })) || [],
         owner: post?.owner || '',
         sendToWin: post?.sendToWin === true,
-        smu: metadata?.smu || '',
+        smu: normalizeSmuValue(metadata?.smu),
         smuOther: metadata?.smuOther || '',
         title: post?.title || '',
         type: post?.type || '',

From 82d25a8faaa57d93bc1890f9cf4aecbf7a67b4e5 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Fri, 18 Sep 2026 09:46:49 +1000
Subject: [PATCH 22/22] PM-6329 Render uploaded images in showcase rich text
 sections

Files attached to The Challenge, The Solution and Business Impact
Realised upload correctly and the markdown image tag is saved on the
post, but the image never appeared on the showcase preview or the
published showcase page.

renderRichTextToHtml sanitizes with a DOMPurify allowlist that did not
include the img tag or the src/alt attributes, so marked's <img> output
was stripped after conversion, leaving an empty paragraph.

Allow img plus alt, src, title and loading in the rich text allowlist,
and style images in the showcase story sections so they scale to the
container. DOMPurify's default URI allowlist still blocks unsafe
schemes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../ProjectShowcasePostPage.module.scss       |  8 ++++++++
 .../ShowcasePostPreview.module.scss           |  8 ++++++++
 src/libs/shared/lib/utils/rich-text.spec.ts   | 20 +++++++++++++++++++
 src/libs/shared/lib/utils/rich-text.ts        |  5 +++++
 4 files changed, 41 insertions(+)

diff --git a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.module.scss b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.module.scss
index e43ee7057..1d671bf57 100644
--- a/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.module.scss
+++ b/src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ProjectShowcasePostPage.module.scss
@@ -161,6 +161,14 @@
         margin-bottom: 8px;
     }
 
+    img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0 0 16px;
+        border-radius: 8px;
+    }
+
     a {
         color: $link-blue-dark;
         font-weight: 700;
diff --git a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
index 477fe9a0d..4f67cddae 100644
--- a/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
+++ b/src/apps/work/src/lib/components/ShowcasePostPreview/ShowcasePostPreview.module.scss
@@ -133,6 +133,14 @@
         padding-left: 20px;
     }
 
+    img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0 0 16px;
+        border-radius: 8px;
+    }
+
     a {
         color: $link-blue-dark;
         font-weight: 700;
diff --git a/src/libs/shared/lib/utils/rich-text.spec.ts b/src/libs/shared/lib/utils/rich-text.spec.ts
index 9cb62ebd2..bd04aaa5c 100644
--- a/src/libs/shared/lib/utils/rich-text.spec.ts
+++ b/src/libs/shared/lib/utils/rich-text.spec.ts
@@ -44,6 +44,26 @@ describe('rich-text utils', () => {
             .toContain('rel="noopener noreferrer"')
     })
 
+    it('renders uploaded images from markdown image markup', () => {
+        const rendered = renderRichTextToHtml(
+            '![diagram.png](https://cdn.filestackcontent.com/q8SsiXd3Tke41bxChthJ)',
+        )
+
+        expect(rendered)
+            .toContain('src="https://cdn.filestackcontent.com/q8SsiXd3Tke41bxChthJ"')
+        expect(rendered)
+            .toContain('alt="diagram.png"')
+    })
+
+    it('removes images with unsafe source urls', () => {
+        const unsafeScheme = `java${'script'}:`
+        const rendered = renderRichTextToHtml(`<img src="${unsafeScheme}alert(1)" alt="bad">`)
+
+        expect(rendered)
+            .not
+            .toContain(unsafeScheme)
+    })
+
     it('supports markdown strikethrough markup', () => {
         const rendered = renderRichTextToHtml('~~deleted~~')
 
diff --git a/src/libs/shared/lib/utils/rich-text.ts b/src/libs/shared/lib/utils/rich-text.ts
index 8be9f9fea..7e93b88fc 100644
--- a/src/libs/shared/lib/utils/rich-text.ts
+++ b/src/libs/shared/lib/utils/rich-text.ts
@@ -3,6 +3,7 @@ import DOMPurify from 'dompurify'
 
 const RICH_TEXT_ALLOWED_ATTRIBUTES = [
     'align',
+    'alt',
     'border',
     'cellpadding',
     'cellspacing',
@@ -10,10 +11,13 @@ const RICH_TEXT_ALLOWED_ATTRIBUTES = [
     'colspan',
     'height',
     'href',
+    'loading',
     'rel',
     'rowspan',
+    'src',
     'style',
     'target',
+    'title',
     'type',
     'width',
 ]
@@ -33,6 +37,7 @@ const RICH_TEXT_ALLOWED_TAGS = [
     'h5',
     'h6',
     'hr',
+    'img',
     'li',
     'ol',
     'p',