PM-5308 project showcase table

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 () => {

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'

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)
 

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>
     )
 }

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;
+    }
+}

src/apps/work/src/lib/components/ProjectsShowcaseFilter/ProjectsShowcaseFilter.tsx

@@ -0,0 +1,113 @@
+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 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={props.onSearchInputChange}
+                        placeholder='Search posts'
+                        type='text'
+                        value={props.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={props.selectedStatus}
+                    onChange={props.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={props.industryOptions}
+                    value={props.selectedIndustry}
+                    onChange={props.onIndustryChange}
+                    isLoading={props.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={props.categoryOptions}
+                    value={props.selectedCategory}
+                    onChange={props.onCategoryChange}
+                    isLoading={props.isCategoriesLoading}
+                />
+            </div>
+
+            <div className={styles.actions}>
+                <Button
+                    secondary
+                    size='lg'
+                    label='Clear Filters'
+                    onClick={props.onResetFilters}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProjectsShowcaseFilter

src/apps/work/src/lib/components/ProjectsShowcaseFilter/index.ts

@@ -0,0 +1 @@
+export * from './ProjectsShowcaseFilter'

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'

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'