From 733ffc5e0229f646855af4f1b8a77b511748325b Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 25 Jun 2026 18:07:40 +0300
Subject: [PATCH 1/3] PM-5308 - projects showcase posts table

---
 .../lib/hooks/useFetchSubmissionReviews.ts    |  46 +-
 src/apps/work/src/config/routes.config.ts     |   1 +
 .../ProjectListTabs/ProjectListTabs.spec.tsx  |   1 +
 .../ProjectListTabs/ProjectListTabs.tsx       |   8 +
 .../ProjectsShowcaseFilter.module.scss        |  65 +++
 .../ProjectsShowcaseFilter.tsx                | 129 +++++
 .../ProjectsShowcaseFilter/index.ts           |   1 +
 src/apps/work/src/lib/components/index.ts     |   1 +
 src/apps/work/src/lib/hooks/index.ts          |   1 +
 .../lib/hooks/useFetchProjectShowcasePosts.ts | 133 +++++
 .../lib/models/ProjectShowcasePost.model.ts   |  45 ++
 src/apps/work/src/lib/models/index.ts         |   1 +
 src/apps/work/src/lib/services/index.ts       |   1 +
 .../project-showcase-posts.service.ts         | 177 ++++++
 .../ProjectShowcasePage.module.scss           | 120 +++++
 .../ProjectShowcasePage.tsx                   | 502 ++++++++++++++++++
 .../showcase/ProjectShowcasePage/index.ts     |   3 +
 src/apps/work/src/pages/showcase/index.ts     |   1 +
 src/apps/work/src/work-app.routes.tsx         |  16 +
 19 files changed, 1229 insertions(+), 23 deletions(-)
 create mode 100644 src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.module.scss
 create mode 100644 src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
 create mode 100644 src/apps/work/src/lib/components/ProjectsShowcaseFilter/index.ts
 create mode 100644 src/apps/work/src/lib/hooks/useFetchProjectShowcasePosts.ts
 create mode 100644 src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
 create mode 100644 src/apps/work/src/lib/services/project-showcase-posts.service.ts
 create mode 100644 src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
 create mode 100644 src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
 create mode 100644 src/apps/work/src/pages/showcase/ProjectShowcasePage/index.ts
 create mode 100644 src/apps/work/src/pages/showcase/index.ts

diff --git a/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts b/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts
index a89e0e930..751cbb2cd 100644
--- a/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts
+++ b/src/apps/review/src/lib/hooks/useFetchSubmissionReviews.ts
@@ -799,29 +799,6 @@ export function useFetchSubmissionReviews(reviewId: string = ''): useFetchSubmis
             const listRequest: Promise<
                 BackendReviewItem | BackendAppealResponse
             >[] = []
-            if (updatedResponse) {
-                listRequest.push(
-                    new Promise<BackendReviewItem>((resolve, reject) => {
-                        updateReviewItem(reviewItem.id, {
-                            finalAnswer: updatedResponse,
-                            initialAnswer: reviewItem.initialAnswer ?? '',
-                            scorecardQuestionId: reviewItem.scorecardQuestionId,
-                        })
-                            .then(rs => {
-                                setUpdatedReviewInfo(previousReviewInfo => applyAppealResponseScoreUpdate(
-                                    previousReviewInfo ?? reviewInfo,
-                                    reviewItem.id,
-                                    updatedResponse,
-                                    scorecardInfo,
-                                ))
-
-                                resolve(rs)
-                            })
-                            .catch(reject)
-                    }),
-                )
-            }
-
             listRequest.push(
                 new Promise<BackendAppealResponse>((resolve, reject) => {
                     const updateData = {
@@ -855,6 +832,29 @@ export function useFetchSubmissionReviews(reviewId: string = ''): useFetchSubmis
                 }),
             )
 
+            if (updatedResponse) {
+                listRequest.push(
+                    new Promise<BackendReviewItem>((resolve, reject) => {
+                        updateReviewItem(reviewItem.id, {
+                            finalAnswer: updatedResponse,
+                            initialAnswer: reviewItem.initialAnswer ?? '',
+                            scorecardQuestionId: reviewItem.scorecardQuestionId,
+                        })
+                            .then(rs => {
+                                setUpdatedReviewInfo(previousReviewInfo => applyAppealResponseScoreUpdate(
+                                    previousReviewInfo ?? reviewInfo,
+                                    reviewItem.id,
+                                    updatedResponse,
+                                    scorecardInfo,
+                                ))
+
+                                resolve(rs)
+                            })
+                            .catch(reject)
+                    }),
+                )
+            }
+
             setIsSavingAppealResponse(true)
             Promise.all(listRequest)
                 .then(async () => {
diff --git a/src/apps/work/src/config/routes.config.ts b/src/apps/work/src/config/routes.config.ts
index 91b847e7a..e9f8ed0ff 100644
--- a/src/apps/work/src/config/routes.config.ts
+++ b/src/apps/work/src/config/routes.config.ts
@@ -23,6 +23,7 @@ export const engagementAssignmentsRouteId = 'engagement-assignments'
 export const engagementFeedbackRouteId = 'engagement-feedback'
 export const engagementExperienceRouteId = 'engagement-experience'
 export const projectAssetsRouteId = 'project-assets'
+export const projectShowcaseRouteId = 'project-showcase'
 export const usersRouteId = 'users'
 export const projectInvitationsRouteId = 'project-invitations'
 export const groupsRouteId = 'groups'
diff --git a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.spec.tsx b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.spec.tsx
index 585759bc1..9f13b5906 100644
--- a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.spec.tsx
+++ b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.spec.tsx
@@ -81,6 +81,7 @@ describe('ProjectListTabs', () => {
         ['/projects/200/engagements', 'Engagements'],
         ['/projects/200/users', 'Users'],
         ['/projects/200/assets', 'Assets Library'],
+        ['/projects/200/showcase', 'Showcase'],
     ])('marks the matching tab active for %s', (pathname: string, activeLabel: string) => {
         renderProjectListTabs(pathname)
 
diff --git a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.tsx b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.tsx
index f00defa2d..12b099638 100644
--- a/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.tsx
+++ b/src/apps/work/src/lib/components/ProjectListTabs/ProjectListTabs.tsx
@@ -43,11 +43,13 @@ export const ProjectListTabs: FC<ProjectListTabsProps> = (props: ProjectListTabs
     const engagementsPath = `/projects/${props.projectId}/engagements`
     const usersPath = `/projects/${props.projectId}/users`
     const assetsPath = `/projects/${props.projectId}/assets`
+    const showcasePath = `/projects/${props.projectId}/showcase`
 
     const isChallengesActive = isTabActive(pathname, challengesPath)
     const isEngagementsActive = isTabActive(pathname, engagementsPath)
     const isUsersActive = isTabActive(pathname, usersPath)
     const isAssetsActive = isTabActive(pathname, assetsPath)
+    const isShowcaseActive = isTabActive(pathname, showcasePath)
     const canViewEngagements = canViewAllEngagements(userRoles)
     const usersLinkState = isUsersActive
         ? undefined
@@ -84,6 +86,12 @@ export const ProjectListTabs: FC<ProjectListTabsProps> = (props: ProjectListTabs
             >
                 Assets Library
             </Link>
+            <Link
+                className={classNames(styles.tabLink, isShowcaseActive ? styles.active : undefined)}
+                to={showcasePath}
+            >
+                Showcase
+            </Link>
         </div>
     )
 }
diff --git a/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.module.scss b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.module.scss
new file mode 100644
index 000000000..3263408d4
--- /dev/null
+++ b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.module.scss
@@ -0,0 +1,65 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    margin-bottom: 20px;
+    margin-top: 8px;
+    padding: 20px;
+    border-radius: 8px;
+    background: rgba(224, 228, 232, 0.3);
+}
+
+.filterField {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    label {
+        color: $black-80;
+        font-size: 13px;
+    }
+}
+
+.actions {
+    display: flex;
+    align-items: flex-end;
+    justify-self: start;
+}
+
+.searchInputWrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid $black-20;
+    border-radius: 4px;
+    background: #fff;
+    padding: 8px 12px;
+}
+
+.searchIcon {
+    color: $black-60;
+    width: 18px;
+    height: 18px;
+}
+
+.searchInput {
+    border: 0;
+    background: transparent;
+    color: $black-80;
+    outline: none;
+    width: 100%;
+}
+
+@media (max-width: 1100px) {
+    .container {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 700px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
new file mode 100644
index 000000000..3bce1c37c
--- /dev/null
+++ b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
@@ -0,0 +1,129 @@
+import { ChangeEvent, FC, useMemo } from 'react'
+import Select, { SingleValue } from 'react-select'
+
+import {
+    Button,
+    IconOutline,
+} from '~/libs/ui'
+
+import styles from './ProjectsShowcaseFilter.module.scss'
+
+interface SelectOption {
+    label: string
+    value: string
+}
+
+interface ProjectsShowcaseFilterProps {
+    keywordInput: string
+    selectedStatus?: SelectOption
+    selectedIndustry?: SelectOption
+    selectedCategory?: SelectOption
+    industryOptions: SelectOption[]
+    categoryOptions: SelectOption[]
+    isIndustriesLoading: boolean
+    isCategoriesLoading: boolean
+    onSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void
+    onStatusChange: (option: SingleValue<SelectOption>) => void
+    onIndustryChange: (option: SingleValue<SelectOption>) => void
+    onCategoryChange: (option: SingleValue<SelectOption>) => void
+    onResetFilters: () => void
+}
+
+const STATUS_OPTIONS: SelectOption[] = [
+    { label: 'All statuses', value: '' },
+    { label: 'Draft', value: 'DRAFT' },
+    { label: 'Published', value: 'PUBLISHED' },
+    { label: 'Archived', value: 'ARCHIVED' },
+]
+
+export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: ProjectsShowcaseFilterProps) => {
+    const {
+        categoryOptions,
+        selectedCategory,
+        selectedIndustry,
+        selectedStatus,
+        industryOptions,
+        isCategoriesLoading,
+        isIndustriesLoading,
+        keywordInput,
+        onCategoryChange,
+        onIndustryChange,
+        onResetFilters,
+        onSearchInputChange,
+        onStatusChange,
+    } = props
+
+    const statusOptions = useMemo<SelectOption[]>(() => STATUS_OPTIONS, [])
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.filterField}>
+                <label htmlFor='work-showcase-search'>Search</label>
+                <div className={styles.searchInputWrap}>
+                    <IconOutline.SearchIcon className={styles.searchIcon} />
+                    <input
+                        id='work-showcase-search'
+                        aria-label='Search showcase posts'
+                        className={styles.searchInput}
+                        onChange={onSearchInputChange}
+                        placeholder='Search posts'
+                        type='text'
+                        value={keywordInput}
+                    />
+                </div>
+            </div>
+
+            <div className={styles.filterField}>
+                <label htmlFor='work-showcase-status'>Status</label>
+                <Select
+                    inputId='work-showcase-status'
+                    className='react-select-container'
+                    classNamePrefix='select'
+                    isClearable
+                    options={statusOptions}
+                    value={selectedStatus}
+                    onChange={onStatusChange}
+                />
+            </div>
+
+            <div className={styles.filterField}>
+                <label htmlFor='work-showcase-industry'>Industry</label>
+                <Select
+                    inputId='work-showcase-industry'
+                    className='react-select-container'
+                    classNamePrefix='select'
+                    isClearable
+                    options={industryOptions}
+                    value={selectedIndustry}
+                    onChange={onIndustryChange}
+                    isLoading={isIndustriesLoading}
+                />
+            </div>
+
+            <div className={styles.filterField}>
+                <label htmlFor='work-showcase-category'>Category</label>
+                <Select
+                    inputId='work-showcase-category'
+                    className='react-select-container'
+                    classNamePrefix='select'
+                    isClearable
+                    options={categoryOptions}
+                    value={selectedCategory}
+                    onChange={onCategoryChange}
+                    isLoading={isCategoriesLoading}
+                />
+            </div>
+
+            <div className={styles.actions}>
+                <Button
+                    secondary
+                    size='lg'
+                    label='Clear Filters'
+                    onClick={onResetFilters}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProjectsShowcaseFilter
diff --git a/src/apps/work/src/lib/components/ProjectsShowcaseFilter/index.ts b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/index.ts
new file mode 100644
index 000000000..79d31d5ff
--- /dev/null
+++ b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/index.ts
@@ -0,0 +1 @@
+export * from './ProjectsShowcaseFilter'
diff --git a/src/apps/work/src/lib/components/index.ts b/src/apps/work/src/lib/components/index.ts
index 519666342..e7cde4499 100644
--- a/src/apps/work/src/lib/components/index.ts
+++ b/src/apps/work/src/lib/components/index.ts
@@ -27,6 +27,7 @@ export * from './ProjectStatus'
 export * from './PaymentFormModal'
 export * from './PaymentHistoryModal'
 export * from './ProjectsFilter'
+export * from './ProjectsShowcaseFilter'
 export * from './ProjectsTable'
 export * from './ResourceAddModal'
 export * from './ResourcesTable'
diff --git a/src/apps/work/src/lib/hooks/index.ts b/src/apps/work/src/lib/hooks/index.ts
index 6a2617a0b..72ee0e19d 100644
--- a/src/apps/work/src/lib/hooks/index.ts
+++ b/src/apps/work/src/lib/hooks/index.ts
@@ -22,6 +22,7 @@ export * from './useFetchProjectAttachments'
 export * from './useFetchProjectMembers'
 export * from './useFetchProjects'
 export * from './useFetchProjectsList'
+export * from './useFetchProjectShowcasePosts'
 export * from './useFetchProjectTypes'
 export * from './useFetchResources'
 export * from './useFetchResourceRoles'
diff --git a/src/apps/work/src/lib/hooks/useFetchProjectShowcasePosts.ts b/src/apps/work/src/lib/hooks/useFetchProjectShowcasePosts.ts
new file mode 100644
index 000000000..a6b7cc0c7
--- /dev/null
+++ b/src/apps/work/src/lib/hooks/useFetchProjectShowcasePosts.ts
@@ -0,0 +1,133 @@
+import { useMemo } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import {
+    fetchProjectShowcasePostCategories,
+    fetchProjectShowcasePostIndustries,
+    fetchProjectShowcasePosts,
+} from '../services'
+import type {
+    FetchProjectShowcasePostsParams,
+    FetchProjectShowcasePostsResponse,
+    ProjectShowcasePostCategory,
+    ProjectShowcasePostIndustry,
+} from '../models'
+
+export interface UseFetchProjectShowcasePostsResult {
+    posts: FetchProjectShowcasePostsResponse['posts']
+    metadata: FetchProjectShowcasePostsResponse['metadata']
+    isLoading: boolean
+    isValidating: boolean
+    error: Error | undefined
+    mutate: SWRResponse<FetchProjectShowcasePostsResponse, Error>['mutate']
+}
+
+export function useFetchProjectShowcasePosts(
+    params: FetchProjectShowcasePostsParams,
+): UseFetchProjectShowcasePostsResult {
+    const requestParams: FetchProjectShowcasePostsParams = useMemo(
+        () => params,
+        [params],
+    )
+    const swrKey = useMemo(
+        () => [
+            'work/project-showcase-posts',
+            requestParams.projectId,
+            requestParams.keyword || '',
+            requestParams.status || '',
+            requestParams.industryId || '',
+            requestParams.categoryId || '',
+            String(requestParams.page || 1),
+            String(requestParams.perPage || 10),
+            requestParams.sortBy || '',
+            requestParams.sortOrder || '',
+        ],
+        [requestParams],
+    )
+
+    const {
+        data,
+        error,
+        isValidating,
+        mutate,
+    }: SWRResponse<FetchProjectShowcasePostsResponse, Error> = useSWR<FetchProjectShowcasePostsResponse, Error>(
+        swrKey,
+        () => fetchProjectShowcasePosts(requestParams),
+        {
+            errorRetryCount: 2,
+            shouldRetryOnError: true,
+        },
+    )
+
+    return {
+        error,
+        isLoading: !data && !error,
+        isValidating,
+        metadata: data?.metadata ?? {
+            page: requestParams.page || 1,
+            perPage: requestParams.perPage || 10,
+            total: 0,
+            totalPages: 0,
+        },
+        mutate,
+        posts: data?.posts || [],
+    }
+}
+
+export interface UseFetchProjectShowcaseTaxonomyResult<T> {
+    items: T[]
+    isLoading: boolean
+    isValidating: boolean
+    error: Error | undefined
+    mutate: SWRResponse<T[], Error>['mutate']
+}
+
+export function useFetchProjectShowcasePostIndustries():
+    UseFetchProjectShowcaseTaxonomyResult<ProjectShowcasePostIndustry> {
+    const {
+        data,
+        error,
+        isValidating,
+        mutate,
+    }: SWRResponse<ProjectShowcasePostIndustry[], Error> = useSWR(
+        'work/showcase-post-industries',
+        fetchProjectShowcasePostIndustries,
+        {
+            errorRetryCount: 2,
+            shouldRetryOnError: true,
+        },
+    )
+
+    return {
+        error,
+        isLoading: !data && !error,
+        isValidating,
+        items: data || [],
+        mutate,
+    }
+}
+
+export function useFetchProjectShowcasePostCategories():
+    UseFetchProjectShowcaseTaxonomyResult<ProjectShowcasePostCategory> {
+    const {
+        data,
+        error,
+        isValidating,
+        mutate,
+    }: SWRResponse<ProjectShowcasePostCategory[], Error> = useSWR(
+        'work/showcase-post-categories',
+        fetchProjectShowcasePostCategories,
+        {
+            errorRetryCount: 2,
+            shouldRetryOnError: true,
+        },
+    )
+
+    return {
+        error,
+        isLoading: !data && !error,
+        isValidating,
+        items: data || [],
+        mutate,
+    }
+}
diff --git a/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
new file mode 100644
index 000000000..5b942bb01
--- /dev/null
+++ b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
@@ -0,0 +1,45 @@
+import { SortOrder } from '../utils/sorting.utils'
+
+import { PaginationModel } from './Pagination.model'
+
+export interface ProjectShowcasePostTaxonomyItem {
+    id: string
+    name: string
+}
+
+export interface ProjectShowcasePost {
+    id: string
+    title: string
+    status: string
+    createdAt: string
+    createdById: number
+    industries: ProjectShowcasePostTaxonomyItem[]
+    categories: ProjectShowcasePostTaxonomyItem[]
+}
+
+export interface ProjectShowcasePostFilters {
+    keyword?: string
+    status?: string
+    industryId?: string
+    categoryId?: string
+}
+
+export interface FetchProjectShowcasePostsParams extends ProjectShowcasePostFilters {
+    projectId: string
+    page?: number
+    perPage?: number
+    sortBy?: string
+    sortOrder?: SortOrder
+}
+
+export interface FetchProjectShowcasePostsResponse {
+    posts: ProjectShowcasePost[]
+    metadata: PaginationModel
+}
+
+export interface ProjectShowcasePostCategory {
+    id: string
+    name: string
+}
+
+export type ProjectShowcasePostIndustry = ProjectShowcasePostCategory
diff --git a/src/apps/work/src/lib/models/index.ts b/src/apps/work/src/lib/models/index.ts
index 0f6ae477c..676d64555 100644
--- a/src/apps/work/src/lib/models/index.ts
+++ b/src/apps/work/src/lib/models/index.ts
@@ -36,3 +36,4 @@ export * from './Timeline.model'
 export * from './Track.model'
 export * from './User.model'
 export * from './WorkAppContextModel.model'
+export * from './ProjectShowcasePost.model'
diff --git a/src/apps/work/src/lib/services/index.ts b/src/apps/work/src/lib/services/index.ts
index bc2bf0b76..c5ab10ede 100644
--- a/src/apps/work/src/lib/services/index.ts
+++ b/src/apps/work/src/lib/services/index.ts
@@ -28,6 +28,7 @@ export * from './payments.service'
 export * from './marathon-match.service'
 export * from './project-member-invites.service'
 export * from './projects.service'
+export * from './project-showcase-posts.service'
 export type {
     ProjectSummary,
 } from './projects.service'
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
new file mode 100644
index 000000000..c8735f870
--- /dev/null
+++ b/src/apps/work/src/lib/services/project-showcase-posts.service.ts
@@ -0,0 +1,177 @@
+import {
+    xhrGetAsync,
+    xhrGetPaginatedAsync,
+} from '~/libs/core'
+
+import {
+    PROJECTS_API_URL,
+    PROJECTS_PAGE_SIZE,
+} from '../constants'
+import type {
+    FetchProjectShowcasePostsParams,
+    FetchProjectShowcasePostsResponse,
+    ProjectShowcasePostCategory,
+    ProjectShowcasePostIndustry,
+} from '../models'
+
+function normalizeError(error: unknown, fallbackMessage: string): Error {
+    const typedError = error as {
+        message?: string
+        response?: {
+            data?: {
+                message?: string
+            }
+        }
+    }
+
+    const errorMessage = typedError?.response?.data?.message
+        || typedError?.message
+        || fallbackMessage
+
+    return new Error(errorMessage)
+}
+
+function buildProjectShowcasePostsSortValue(
+    sortBy: string,
+    sortOrder: 'asc' | 'desc',
+): string {
+    const normalizedSortBy = sortBy.trim() || 'updatedAt'
+    const safeSortOrder = sortOrder === 'asc' ? 'asc' : 'desc'
+
+    return `${normalizedSortBy} ${safeSortOrder}`
+}
+
+function buildProjectShowcasePostsUrl(
+    params: FetchProjectShowcasePostsParams,
+): string {
+    const page = params.page || 1
+    const perPage = params.perPage || PROJECTS_PAGE_SIZE
+    const query = new URLSearchParams({
+        page: String(page),
+        perPage: String(perPage),
+    })
+
+    if (params.keyword?.trim()) {
+        query.set('keyword', params.keyword.trim())
+    }
+
+    if (params.status?.trim()) {
+        query.set('status', params.status.trim())
+    }
+
+    if (params.industryId?.trim()) {
+        query.set('industryId', params.industryId.trim())
+    }
+
+    if (params.categoryId?.trim()) {
+        query.set('categoryId', params.categoryId.trim())
+    }
+
+    if (params.sortBy?.trim() && params.sortOrder) {
+        query.set(
+            'sort',
+            buildProjectShowcasePostsSortValue(params.sortBy, params.sortOrder),
+        )
+    }
+
+    return `${PROJECTS_API_URL}/${encodeURIComponent(params.projectId)}/posts?${query.toString()}`
+}
+
+export async function fetchProjectShowcasePosts(
+    params: FetchProjectShowcasePostsParams,
+): Promise<FetchProjectShowcasePostsResponse> {
+    try {
+        const response = await xhrGetPaginatedAsync<any>(
+            buildProjectShowcasePostsUrl(params),
+        )
+
+        return {
+            metadata: {
+                page: response.page || 0,
+                perPage: response.perPage || 20,
+                total: response.total || 0,
+                totalPages: response.totalPages || 0,
+            },
+            posts: (response.data || []).map((post: any) => ({
+                categories: Array.isArray(post.categories)
+                    ? post.categories.map((category: any) => ({
+                        id: String(category.id),
+                        name: String(category.name || ''),
+                    }))
+                    : [],
+                createdAt: String(post.createdAt || ''),
+                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 || ''),
+                    }))
+                    : [],
+                status: String(post.status || ''),
+                title: String(post.title || ''),
+            })),
+        }
+    } catch (error) {
+        throw normalizeError(error, 'Failed to fetch showcase posts')
+    }
+}
+
+function normalizeTaxonomyItem(value: unknown): ProjectShowcasePostCategory | undefined {
+    if (typeof value !== 'object' || value === null) {
+        return undefined
+    }
+
+    const item = value as Partial<ProjectShowcasePostCategory>
+    const id = item.id !== undefined && item.id !== null
+        ? String(item.id)
+        : ''
+    const name = item.name !== undefined && item.name !== null
+        ? String(item.name)
+        : ''
+    const trimmedName = name.trim()
+
+    if (!id || !trimmedName) {
+        return undefined
+    }
+
+    return { id, name: trimmedName }
+}
+
+function sortTaxonomyItems<T extends ProjectShowcasePostCategory>(items: T[]): T[] {
+    return items
+        .slice()
+        .sort((left, right) => left.name.localeCompare(right.name))
+}
+
+export async function fetchProjectShowcasePostIndustries(): Promise<ProjectShowcasePostIndustry[]> {
+    try {
+        const response = await xhrGetAsync<unknown[]>(
+            `${PROJECTS_API_URL}/posts/industries`,
+        )
+
+        return sortTaxonomyItems(
+            (response || [])
+                .map(normalizeTaxonomyItem)
+                .filter((item): item is ProjectShowcasePostIndustry => !!item),
+        )
+    } catch (error) {
+        throw normalizeError(error, 'Failed to fetch showcase industries')
+    }
+}
+
+export async function fetchProjectShowcasePostCategories(): Promise<ProjectShowcasePostCategory[]> {
+    try {
+        const response = await xhrGetAsync<unknown[]>(
+            `${PROJECTS_API_URL}/posts/categories`,
+        )
+
+        return sortTaxonomyItems(
+            (response || [])
+                .map(normalizeTaxonomyItem)
+                .filter((item): item is ProjectShowcasePostCategory => !!item),
+        )
+    } catch (error) {
+        throw normalizeError(error, 'Failed to fetch showcase categories')
+    }
+}
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
new file mode 100644
index 000000000..807b163c2
--- /dev/null
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
@@ -0,0 +1,120 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-top: 16px;
+}
+
+.filters {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 16px;
+    align-items: end;
+}
+
+.filterField {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.searchInputWrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid $black-20;
+    border-radius: 4px;
+    background: #fff;
+    padding: 8px 12px;
+}
+
+.searchIcon {
+    color: $black-60;
+    width: 18px;
+    height: 18px;
+}
+
+.searchInput {
+    border: 0;
+    background: transparent;
+    color: $black-80;
+    outline: none;
+    width: 100%;
+}
+
+.actions {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.errorBanner {
+    max-width: 100%;
+}
+
+.tableWrap {
+    border: 1px solid $black-10;
+    border-radius: 8px;
+    background: #fff;
+    overflow-x: auto;
+}
+
+.table {
+    border-collapse: collapse;
+    min-width: 920px;
+    width: 100%;
+
+    thead tr {
+        background: #f7f8fa;
+    }
+}
+
+.table th,
+.table td {
+    border-bottom: 1px solid $black-10;
+    padding: 12px 10px;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.table th {
+    color: $black-60;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
+}
+
+.sortButton {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+}
+
+.table td {
+    color: $black-80;
+    font-size: 13px;
+}
+
+.loadingRow,
+.emptyRow {
+    text-align: center;
+    padding: 24px 0;
+}
+
+@media (max-width: 1100px) {
+    .filters {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 700px) {
+    .filters {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
new file mode 100644
index 000000000..d0d1d4d79
--- /dev/null
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
@@ -0,0 +1,502 @@
+import { PageWrapper } from '~/apps/review/src/lib'
+import {
+    Button,
+    IconOutline,
+    LoadingSpinner,
+} from '~/libs/ui'
+import {
+    ChangeEvent,
+    FC,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import { useParams } from 'react-router-dom'
+import Select, { SingleValue } from 'react-select'
+import {
+    ErrorMessage,
+    Pagination,
+    ProjectListTabs,
+    ProjectsShowcaseFilter,
+} from '../../../lib/components'
+import {
+    useFetchProjectShowcasePostCategories,
+    useFetchProjectShowcasePostIndustries,
+    useFetchProjectShowcasePosts,
+} from '../../../lib/hooks'
+
+import type {
+    FetchProjectShowcasePostsParams,
+    ProjectShowcasePost,
+    ProjectShowcasePostCategory,
+    ProjectShowcasePostFilters,
+    ProjectShowcasePostIndustry,
+} from '../../../lib/models'
+
+import styles from './ProjectShowcasePage.module.scss'
+
+interface SelectOption {
+    label: string
+    value: string
+}
+
+const DEFAULT_FILTERS: ProjectShowcasePostFilters = {
+    categoryId: undefined,
+    industryId: undefined,
+    keyword: undefined,
+    status: undefined,
+}
+
+const STATUS_OPTIONS: SelectOption[] = [
+    { label: 'All statuses', value: '' },
+    { label: 'Draft', value: 'DRAFT' },
+    { label: 'Published', value: 'PUBLISHED' },
+    { label: 'Archived', value: 'ARCHIVED' },
+]
+
+function getStatusLabel(status: string): string {
+    return status
+        .toLowerCase()
+        .split(/[_ ]+/)
+        .map(segment => {
+            const firstCharacter = segment.charAt(0)
+            return `${firstCharacter.toUpperCase()}${segment.slice(1)}`
+        })
+        .join(' ')
+}
+
+function getSortIndicator(
+    currentSortBy: string,
+    currentSortOrder: 'asc' | 'desc',
+    fieldName: string,
+): string {
+    if (currentSortBy !== fieldName) {
+        return ''
+    }
+
+    return currentSortOrder === 'asc'
+        ? ' \u2191'
+        : ' \u2193'
+}
+
+function formatDate(value: string | undefined): string {
+    if (!value) {
+        return '—'
+    }
+
+    const parsed = new Date(value)
+    if (Number.isNaN(parsed.getTime())) {
+        return value
+    }
+
+    return parsed.toLocaleString('en-US', {
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    })
+}
+
+function normalizeTaxonomyOption(item: ProjectShowcasePostCategory | ProjectShowcasePostIndustry): SelectOption {
+    return {
+        label: item.name,
+        value: item.id,
+    }
+}
+
+function createTaxonomyOptions(
+    items: Array<ProjectShowcasePostCategory | ProjectShowcasePostIndustry>,
+    defaultLabel: string,
+): SelectOption[] {
+    return [
+        { label: defaultLabel, value: '' },
+        ...items.map(normalizeTaxonomyOption),
+    ]
+}
+
+function findSelectedOption(
+    options: SelectOption[],
+    value: string | undefined,
+): SelectOption | undefined {
+    return options.find(option => option.value === (value || ''))
+}
+
+function buildProjectShowcaseFetchParams(
+    projectId: string | undefined,
+    filters: ProjectShowcasePostFilters,
+    page: number,
+    perPage: number,
+    sortBy: string,
+    sortOrder: 'asc' | 'desc',
+): FetchProjectShowcasePostsParams {
+    return {
+        categoryId: filters.categoryId,
+        industryId: filters.industryId,
+        keyword: filters.keyword,
+        page,
+        perPage,
+        projectId: projectId ?? '',
+        sortBy,
+        sortOrder,
+        status: filters.status,
+    }
+}
+
+function getProjectShowcaseError(
+    postsError: Error | undefined,
+    industriesError: Error | undefined,
+    categoriesError: Error | undefined,
+): Error | undefined {
+    return postsError || industriesError || categoriesError
+}
+
+function getProjectShowcaseLoading(
+    postsLoading: boolean,
+    industriesLoading: boolean,
+    categoriesLoading: boolean,
+): boolean {
+    return postsLoading || industriesLoading || categoriesLoading
+}
+
+function getPostSortValue(
+    post: ProjectShowcasePost,
+    sortBy: string,
+): string {
+    switch (sortBy) {
+        case 'title':
+            return post.title.toLowerCase()
+        case 'industry':
+            return post.industries
+                .map(item => item.name.toLowerCase())
+                .join(', ')
+        case 'category':
+            return post.categories
+                .map(item => item.name.toLowerCase())
+                .join(', ')
+        default:
+            return ''
+    }
+}
+
+function sortProjectShowcasePosts(
+    posts: ProjectShowcasePost[],
+    sortBy: string,
+    sortOrder: 'asc' | 'desc',
+): ProjectShowcasePost[] {
+    return [...posts].sort((left, right) => {
+        const leftValue = getPostSortValue(left, sortBy)
+        const rightValue = getPostSortValue(right, sortBy)
+
+        if (leftValue < rightValue) {
+            return sortOrder === 'asc' ? -1 : 1
+        }
+
+        if (leftValue > rightValue) {
+            return sortOrder === 'asc' ? 1 : -1
+        }
+
+        return 0
+    })
+}
+
+export const ProjectShowcasePage: FC = () => {
+    const params = useParams<{ projectId: string }>()
+    const projectId = params.projectId
+
+    const [filters, setFilters] = useState<ProjectShowcasePostFilters>(DEFAULT_FILTERS)
+    const [keywordInput, setKeywordInput] = useState<string>('')
+    const [page, setPage] = useState<number>(1)
+    const [perPage, setPerPage] = useState<number>(10)
+    const [sortBy, setSortBy] = useState<string>('updatedAt')
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
+
+    const isFirstDebouncedRender = useRef<boolean>(true)
+
+    const industriesResult = useFetchProjectShowcasePostIndustries()
+    const categoriesResult = useFetchProjectShowcasePostCategories()
+
+    const fetchParams = useMemo(
+        () => buildProjectShowcaseFetchParams(
+            projectId,
+            filters,
+            page,
+            perPage,
+            sortBy,
+            sortOrder,
+        ),
+        [projectId, filters, page, perPage, sortBy, sortOrder],
+    )
+
+    const postsResult = useFetchProjectShowcasePosts(fetchParams)
+
+    useEffect(() => {
+        setKeywordInput(filters.keyword || '')
+    }, [filters.keyword])
+
+    useEffect(() => {
+        if (isFirstDebouncedRender.current) {
+            isFirstDebouncedRender.current = false
+            return undefined
+        }
+
+        const timeout = window.setTimeout(() => {
+            setFilters(current => ({
+                ...current,
+                keyword: keywordInput || undefined,
+            }))
+            setPage(1)
+        }, 350)
+
+        return () => {
+            window.clearTimeout(timeout)
+        }
+    }, [keywordInput])
+
+    const industryOptions = useMemo<SelectOption[]>(
+        () => createTaxonomyOptions(industriesResult.items, 'All industries'),
+        [industriesResult.items],
+    )
+
+    const categoryOptions = useMemo<SelectOption[]>(
+        () => createTaxonomyOptions(categoriesResult.items, 'All categories'),
+        [categoriesResult.items],
+    )
+
+    const selectedStatus = findSelectedOption(STATUS_OPTIONS, filters.status)
+    const selectedIndustry = findSelectedOption(industryOptions, filters.industryId)
+    const selectedCategory = findSelectedOption(categoryOptions, filters.categoryId)
+
+    const filteredPosts = useMemo(
+        () => sortProjectShowcasePosts(postsResult.posts, sortBy, sortOrder),
+        [postsResult.posts, sortBy, sortOrder],
+    )
+
+    const hasProjectId = Boolean(projectId)
+    const isLoading = getProjectShowcaseLoading(
+        postsResult.isLoading,
+        industriesResult.isLoading,
+        categoriesResult.isLoading,
+    )
+    const error = getProjectShowcaseError(
+        postsResult.error,
+        industriesResult.error,
+        categoriesResult.error,
+    )
+    const totalPosts = postsResult.metadata.total ?? 0
+    const shouldShowPagination = !error && totalPosts > 0
+
+    const handleStatusChange = useCallback((option: SingleValue<SelectOption>) => {
+        setFilters(current => ({
+            ...current,
+            status: option?.value || undefined,
+        }))
+        setPage(1)
+    }, [])
+
+    const handleIndustryChange = useCallback((option: SingleValue<SelectOption>) => {
+        setFilters(current => ({
+            ...current,
+            industryId: option?.value || undefined,
+        }))
+        setPage(1)
+    }, [])
+
+    const handleCategoryChange = useCallback((option: SingleValue<SelectOption>) => {
+        setFilters(current => ({
+            ...current,
+            categoryId: option?.value || undefined,
+        }))
+        setPage(1)
+    }, [])
+
+    const handleSearchInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+        setKeywordInput(event.target.value)
+    }, [])
+
+    const handlePerPageChange = useCallback((newPerPage: number) => {
+        setPerPage(newPerPage)
+        setPage(1)
+    }, [])
+
+    const handlePageChange = useCallback((newPage: number) => {
+        setPage(newPage)
+    }, [])
+
+    const handleSort = useCallback((fieldName: string) => {
+        setPage(1)
+
+        if (fieldName === sortBy) {
+            setSortOrder(current => (current === 'asc' ? 'desc' : 'asc'))
+            return
+        }
+
+        setSortBy(fieldName)
+        setSortOrder('desc')
+    }, [sortBy])
+
+    const handleSortByTitle = useCallback(() => handleSort('title'), [handleSort])
+    const handleSortByIndustry = useCallback(() => handleSort('industry'), [handleSort])
+    const handleSortByCategory = useCallback(() => handleSort('category'), [handleSort])
+
+    const handleResetFilters = useCallback(() => {
+        setFilters({
+            categoryId: undefined,
+            industryId: undefined,
+            keyword: undefined,
+            status: undefined,
+        })
+        setKeywordInput('')
+        setPage(1)
+        setSortBy('updatedAt')
+        setSortOrder('desc')
+    }, [])
+
+    const handleRetry = useCallback(() => {
+        postsResult
+            .mutate()
+            .catch(() => undefined)
+        industriesResult
+            .mutate()
+            .catch(() => undefined)
+        categoriesResult
+            .mutate()
+            .catch(() => undefined)
+    }, [categoriesResult, industriesResult, postsResult])
+
+    if (!hasProjectId) {
+        return (
+            <PageWrapper pageTitle='Showcase' breadCrumb={[]}>
+                <ErrorMessage message='Project id is required.' />
+            </PageWrapper>
+        )
+    }
+
+    return (
+        <PageWrapper pageTitle='Showcase' breadCrumb={[]}>
+            <ProjectListTabs projectId={projectId as string} />
+            <div className={styles.container}>
+                <ProjectsShowcaseFilter
+                    keywordInput={keywordInput}
+                    selectedStatus={selectedStatus}
+                    selectedIndustry={selectedIndustry}
+                    selectedCategory={selectedCategory}
+                    industryOptions={industryOptions}
+                    categoryOptions={categoryOptions}
+                    isIndustriesLoading={industriesResult.isLoading}
+                    isCategoriesLoading={categoriesResult.isLoading}
+                    onSearchInputChange={handleSearchInputChange}
+                    onStatusChange={handleStatusChange}
+                    onIndustryChange={handleIndustryChange}
+                    onCategoryChange={handleCategoryChange}
+                    onResetFilters={handleResetFilters}
+                />
+
+                {error && (
+                    <div className={styles.errorBanner}>
+                        <ErrorMessage
+                            message={error.message}
+                            onRetry={handleRetry}
+                        />
+                    </div>
+                )}
+
+                <div className={styles.tableWrap}>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>
+                                    <button
+                                        type='button'
+                                        className={styles.sortButton}
+                                        data-field-name='title'
+                                        onClick={handleSortByTitle}
+                                    >
+                                        Title
+                                        {getSortIndicator(sortBy, sortOrder, 'title')}
+                                    </button>
+                                </th>
+                                <th>Status</th>
+                                <th>Created Date</th>
+                                <th>Creator User ID</th>
+                                <th>
+                                    <button
+                                        type='button'
+                                        className={styles.sortButton}
+                                        data-field-name='industry'
+                                        onClick={handleSortByIndustry}
+                                    >
+                                        Industry
+                                        {getSortIndicator(sortBy, sortOrder, 'industry')}
+                                    </button>
+                                </th>
+                                <th>
+                                    <button
+                                        type='button'
+                                        className={styles.sortButton}
+                                        data-field-name='category'
+                                        onClick={handleSortByCategory}
+                                    >
+                                        Category
+                                        {getSortIndicator(sortBy, sortOrder, 'category')}
+                                    </button>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {isLoading && filteredPosts.length === 0 && (
+                                <tr>
+                                    <td colSpan={6} className={styles.loadingRow}>
+                                        <LoadingSpinner inline />
+                                    </td>
+                                </tr>
+                            )}
+
+                            {!isLoading && filteredPosts.length === 0 && (
+                                <tr>
+                                    <td colSpan={6} className={styles.emptyRow}>
+                                        No showcase posts found.
+                                    </td>
+                                </tr>
+                            )}
+
+                            {!isLoading && filteredPosts.map(post => (
+                                <tr key={post.id}>
+                                    <td>{post.title || '—'}</td>
+                                    <td>{getStatusLabel(post.status)}</td>
+                                    <td>{formatDate(post.createdAt)}</td>
+                                    <td>{post.createdById ?? '—'}</td>
+                                    <td>
+                                        {post.industries
+                                            .map(item => item.name)
+                                            .join(', ') || '—'}
+                                    </td>
+                                    <td>
+                                        {post.categories
+                                            .map(item => item.name)
+                                            .join(', ') || '—'}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {shouldShowPagination && (
+                    <Pagination
+                        page={postsResult.metadata.page ?? page}
+                        perPage={postsResult.metadata.perPage ?? perPage}
+                        total={totalPosts}
+                        itemLabel='posts'
+                        onPageChange={handlePageChange}
+                        onPerPageChange={handlePerPageChange}
+                    />
+                )}
+            </div>
+        </PageWrapper>
+    )
+}
+
+export default ProjectShowcasePage
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/index.ts b/src/apps/work/src/pages/showcase/ProjectShowcasePage/index.ts
new file mode 100644
index 000000000..78b6feeed
--- /dev/null
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/index.ts
@@ -0,0 +1,3 @@
+import { ProjectShowcasePage } from './ProjectShowcasePage'
+
+export default ProjectShowcasePage
diff --git a/src/apps/work/src/pages/showcase/index.ts b/src/apps/work/src/pages/showcase/index.ts
new file mode 100644
index 000000000..876a44aa6
--- /dev/null
+++ b/src/apps/work/src/pages/showcase/index.ts
@@ -0,0 +1 @@
+export * from './ProjectShowcasePage/ProjectShowcasePage'
diff --git a/src/apps/work/src/work-app.routes.tsx b/src/apps/work/src/work-app.routes.tsx
index d85ffc9dd..690d5f4fb 100644
--- a/src/apps/work/src/work-app.routes.tsx
+++ b/src/apps/work/src/work-app.routes.tsx
@@ -30,6 +30,7 @@ import {
     projectCreateRouteId,
     projectEditRouteId,
     projectInvitationsRouteId,
+    projectShowcaseRouteId,
     projectsRouteId,
     roleErrorRoute,
     roleErrorRouteId,
@@ -78,6 +79,10 @@ const ProjectAssetsPage: LazyLoadedComponent = lazyLoad(
     () => import('./pages/assets/ProjectAssetsPage'),
 )
 
+const ProjectShowcasePage: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/showcase/ProjectShowcasePage'),
+)
+
 const EngagementsListPage: LazyLoadedComponent = lazyLoad(
     () => import('./pages/engagements/EngagementsListPage'),
 )
@@ -249,6 +254,17 @@ export const workRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '/projects/:projectId/assets',
                 title: 'Project Assets',
             },
+            {
+                authRequired: true,
+                element: (
+                    <ProjectRouteAccessGuard pageTitle='Showcase'>
+                        <ProjectShowcasePage />
+                    </ProjectRouteAccessGuard>
+                ),
+                id: projectShowcaseRouteId,
+                route: '/projects/:projectId/showcase',
+                title: 'Showcase',
+            },
             {
                 authRequired: true,
                 element: <ProjectsListPage />,

From 22be298fc1e1b455b56e158d7e33dacf97b047c2 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 25 Jun 2026 18:43:41 +0300
Subject: [PATCH 2/3] PM-5308 - update UI for projects showcase table

---
 .../lib/models/ProjectShowcasePost.model.ts   |  1 +
 .../project-showcase-posts.service.ts         | 71 ++++++++++++++-----
 .../ProjectShowcasePage.module.scss           | 29 ++++++++
 .../ProjectShowcasePage.tsx                   | 27 +++++--
 4 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
index 5b942bb01..e39f571b4 100644
--- a/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
+++ b/src/apps/work/src/lib/models/ProjectShowcasePost.model.ts
@@ -13,6 +13,7 @@ export interface ProjectShowcasePost {
     status: string
     createdAt: string
     createdById: number
+    createdByHandle?: string
     industries: ProjectShowcasePostTaxonomyItem[]
     categories: ProjectShowcasePostTaxonomyItem[]
 }
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 c8735f870..1cebf77f3 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
@@ -10,9 +10,11 @@ import {
 import type {
     FetchProjectShowcasePostsParams,
     FetchProjectShowcasePostsResponse,
+    ProjectShowcasePost,
     ProjectShowcasePostCategory,
     ProjectShowcasePostIndustry,
 } from '../models'
+import { fetchMembersByUserIds } from './members.service'
 
 function normalizeError(error: unknown, fallbackMessage: string): Error {
     const typedError = error as {
@@ -85,6 +87,55 @@ 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 || ''),
+                }))
+                : [],
+            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 || ''),
+                }))
+                : [],
+            status: String(post.status || ''),
+            title: String(post.title || ''),
+        }))
+
+        const creatorUserIds: string[] = Array.from(new Set<string>(
+            posts
+                .map((post: ProjectShowcasePost) => String(post.createdById))
+                .filter((userId: string) => userId && userId !== '0'),
+        ))
+
+        if (creatorUserIds.length) {
+            const members = await fetchMembersByUserIds(creatorUserIds, 'userId,handle')
+            const handleByUserId = new Map<string, string>()
+
+            members.forEach(member => {
+                if (member.userId && member.handle) {
+                    handleByUserId.set(member.userId, member.handle)
+                }
+            })
+
+            posts.forEach((post: ProjectShowcasePost) => {
+                if (!post.createdByHandle) {
+                    const handle = handleByUserId.get(String(post.createdById))
+                    if (handle) {
+                        post.createdByHandle = handle
+                    }
+                }
+            })
+        }
+
         return {
             metadata: {
                 page: response.page || 0,
@@ -92,25 +143,7 @@ export async function fetchProjectShowcasePosts(
                 total: response.total || 0,
                 totalPages: response.totalPages || 0,
             },
-            posts: (response.data || []).map((post: any) => ({
-                categories: Array.isArray(post.categories)
-                    ? post.categories.map((category: any) => ({
-                        id: String(category.id),
-                        name: String(category.name || ''),
-                    }))
-                    : [],
-                createdAt: String(post.createdAt || ''),
-                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 || ''),
-                    }))
-                    : [],
-                status: String(post.status || ''),
-                title: String(post.title || ''),
-            })),
+            posts,
         }
     } catch (error) {
         throw normalizeError(error, 'Failed to fetch showcase posts')
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
index 807b163c2..ba695d676 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss
@@ -101,6 +101,35 @@
     font-size: 13px;
 }
 
+.statusPill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    border-radius: 999px;
+    padding: 0 12px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-transform: capitalize;
+    white-space: nowrap;
+    &.statusGreen {
+        background: rgba(33, 163, 79, 0.12);
+        color: #1d7f48;
+    }
+
+    &.statusRed {
+        background: rgba(211, 47, 47, 0.13);
+        color: #9f1f1f;
+    }
+
+    &.statusGray {
+        background: rgba(84, 95, 113, 0.1);
+        color: #7c7e81;
+    }
+}
+
+
 .loadingRow,
 .emptyRow {
     text-align: center;
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
index d0d1d4d79..24cb865b5 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
@@ -36,6 +36,7 @@ import type {
 } from '../../../lib/models'
 
 import styles from './ProjectShowcasePage.module.scss'
+import classNames from 'classnames'
 
 interface SelectOption {
     label: string
@@ -67,6 +68,20 @@ function getStatusLabel(status: string): string {
         .join(' ')
 }
 
+function getStatusPillClass(status: string): string {
+    const normalizedStatus = status.toLowerCase()
+
+    if (normalizedStatus === 'published') {
+        return styles.statusGreen
+    }
+
+    if (normalizedStatus === 'archived') {
+        return styles.statusRed
+    }
+
+    return styles.statusGray
+}
+
 function getSortIndicator(
     currentSortBy: string,
     currentSortOrder: 'asc' | 'desc',
@@ -420,7 +435,7 @@ export const ProjectShowcasePage: FC = () => {
                                 </th>
                                 <th>Status</th>
                                 <th>Created Date</th>
-                                <th>Creator User ID</th>
+                                <th>Creator</th>
                                 <th>
                                     <button
                                         type='button'
@@ -464,10 +479,14 @@ export const ProjectShowcasePage: FC = () => {
 
                             {!isLoading && filteredPosts.map(post => (
                                 <tr key={post.id}>
-                                    <td>{post.title || '—'}</td>
-                                    <td>{getStatusLabel(post.status)}</td>
+                                            <td>{post.title || '—'}</td>
+                                    <td>
+                                        <span className={classNames(styles.statusPill, getStatusPillClass(post.status))}>
+                                            {getStatusLabel(post.status)}
+                                        </span>
+                                    </td>
                                     <td>{formatDate(post.createdAt)}</td>
-                                    <td>{post.createdById ?? '—'}</td>
+                                    <td>{post.createdByHandle || '—'}</td>
                                     <td>
                                         {post.industries
                                             .map(item => item.name)

From be3c3475291cb568d7c11c6b56a3fb33326f8d2a Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 25 Jun 2026 23:03:38 +0300
Subject: [PATCH 3/3] lint

---
 .../ProjectsShowcaseFilter.tsx                | 42 ++++++-------------
 .../project-showcase-posts.service.ts         |  1 +
 .../ProjectShowcasePage.tsx                   | 22 +++++-----
 3 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
index 3bce1c37c..f96532ccd 100644
--- a/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
+++ b/src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx
@@ -37,22 +37,6 @@ const STATUS_OPTIONS: SelectOption[] = [
 ]
 
 export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: ProjectsShowcaseFilterProps) => {
-    const {
-        categoryOptions,
-        selectedCategory,
-        selectedIndustry,
-        selectedStatus,
-        industryOptions,
-        isCategoriesLoading,
-        isIndustriesLoading,
-        keywordInput,
-        onCategoryChange,
-        onIndustryChange,
-        onResetFilters,
-        onSearchInputChange,
-        onStatusChange,
-    } = props
-
     const statusOptions = useMemo<SelectOption[]>(() => STATUS_OPTIONS, [])
 
     return (
@@ -65,10 +49,10 @@ export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: P
                         id='work-showcase-search'
                         aria-label='Search showcase posts'
                         className={styles.searchInput}
-                        onChange={onSearchInputChange}
+                        onChange={props.onSearchInputChange}
                         placeholder='Search posts'
                         type='text'
-                        value={keywordInput}
+                        value={props.keywordInput}
                     />
                 </div>
             </div>
@@ -81,8 +65,8 @@ export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: P
                     classNamePrefix='select'
                     isClearable
                     options={statusOptions}
-                    value={selectedStatus}
-                    onChange={onStatusChange}
+                    value={props.selectedStatus}
+                    onChange={props.onStatusChange}
                 />
             </div>
 
@@ -93,10 +77,10 @@ export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: P
                     className='react-select-container'
                     classNamePrefix='select'
                     isClearable
-                    options={industryOptions}
-                    value={selectedIndustry}
-                    onChange={onIndustryChange}
-                    isLoading={isIndustriesLoading}
+                    options={props.industryOptions}
+                    value={props.selectedIndustry}
+                    onChange={props.onIndustryChange}
+                    isLoading={props.isIndustriesLoading}
                 />
             </div>
 
@@ -107,10 +91,10 @@ export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: P
                     className='react-select-container'
                     classNamePrefix='select'
                     isClearable
-                    options={categoryOptions}
-                    value={selectedCategory}
-                    onChange={onCategoryChange}
-                    isLoading={isCategoriesLoading}
+                    options={props.categoryOptions}
+                    value={props.selectedCategory}
+                    onChange={props.onCategoryChange}
+                    isLoading={props.isCategoriesLoading}
                 />
             </div>
 
@@ -119,7 +103,7 @@ export const ProjectsShowcaseFilter: FC<ProjectsShowcaseFilterProps> = (props: P
                     secondary
                     size='lg'
                     label='Clear Filters'
-                    onClick={onResetFilters}
+                    onClick={props.onResetFilters}
                 />
             </div>
         </div>
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 1cebf77f3..d3f93b87e 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
@@ -14,6 +14,7 @@ import type {
     ProjectShowcasePostCategory,
     ProjectShowcasePostIndustry,
 } from '../models'
+
 import { fetchMembersByUserIds } from './members.service'
 
 function normalizeError(error: unknown, fallbackMessage: string): Error {
diff --git a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
index 24cb865b5..f22799af1 100644
--- a/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
+++ b/src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.tsx
@@ -1,9 +1,3 @@
-import { PageWrapper } from '~/apps/review/src/lib'
-import {
-    Button,
-    IconOutline,
-    LoadingSpinner,
-} from '~/libs/ui'
 import {
     ChangeEvent,
     FC,
@@ -14,7 +8,12 @@ import {
     useState,
 } from 'react'
 import { useParams } from 'react-router-dom'
-import Select, { SingleValue } from 'react-select'
+import { SingleValue } from 'react-select'
+import classNames from 'classnames'
+
+import { PageWrapper } from '~/apps/review/src/lib'
+import { LoadingSpinner } from '~/libs/ui'
+
 import {
     ErrorMessage,
     Pagination,
@@ -26,7 +25,6 @@ import {
     useFetchProjectShowcasePostIndustries,
     useFetchProjectShowcasePosts,
 } from '../../../lib/hooks'
-
 import type {
     FetchProjectShowcasePostsParams,
     ProjectShowcasePost,
@@ -36,7 +34,6 @@ import type {
 } from '../../../lib/models'
 
 import styles from './ProjectShowcasePage.module.scss'
-import classNames from 'classnames'
 
 interface SelectOption {
     label: string
@@ -479,9 +476,12 @@ export const ProjectShowcasePage: FC = () => {
 
                             {!isLoading && filteredPosts.map(post => (
                                 <tr key={post.id}>
-                                            <td>{post.title || '—'}</td>
+                                    <td>{post.title || '—'}</td>
                                     <td>
-                                        <span className={classNames(styles.statusPill, getStatusPillClass(post.status))}>
+                                        <span className={
+                                            classNames(styles.statusPill, getStatusPillClass(post.status))
+                                        }
+                                        >
                                             {getStatusLabel(post.status)}
                                         </span>
                                     </td>