PM-5308 project showcase list fixes

src/apps/review/src/lib/components/PageWrapper/PageWrapper.tsx

@@ -14,7 +14,7 @@ import { IconArrowLeft, IconExternalLink } from '../../assets/icons'
 
 import styles from './PageWrapper.module.scss'
 
-interface Props {
+export interface PageWrapperProps {
     className?: string
     pageTitle: string
     backUrl?: string
@@ -25,7 +25,7 @@ interface Props {
     breadCrumb: BreadCrumbData[]
 }
 
-export const PageWrapper: FC<PropsWithChildren<Props>> = props => (
+export const PageWrapper: FC<PropsWithChildren<PageWrapperProps>> = props => (
     <div className={classNames(styles.container, props.className)}>
         {props.breadCrumb.length > 0 && (
             <BreadCrumb list={props.breadCrumb} />

src/apps/review/src/lib/components/PageWrapper/index.ts

@@ -1 +1 @@
-export { default as PageWrapper } from './PageWrapper'
+export { default as PageWrapper, type PageWrapperProps } from './PageWrapper'

src/apps/work/src/lib/components/ProjectPageWrapper/ProjectPageWrapper.module.scss

@@ -0,0 +1,59 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.headerRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-top: 16px;
+}
+
+.sectionTitle {
+    margin: 0;
+    color: $black-80;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.headerActions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.projectTitleActions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.projectEditLink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid $black-20;
+    border-radius: 6px;
+    color: $black-60;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+        border-color: #2a62d5;
+        color: #2a62d5;
+        outline: none;
+    }
+}
+
+.projectEditIcon {
+    width: 16px;
+    height: 16px;
+}

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

@@ -0,0 +1,106 @@
+import { FC, PropsWithChildren, ReactNode, useContext } from 'react'
+import { Link } from 'react-router-dom'
+
+import { IconOutline } from '~/libs/ui'
+import { PageWrapper, PageWrapperProps } from '~/apps/review/src/lib'
+
+import { useFetchProject } from '../../hooks'
+import { ProjectListTabs } from '../ProjectListTabs'
+import { ProjectBillingAccountExpiredNotice } from '../ProjectBillingAccountExpiredNotice'
+import { WorkAppContextModel } from '../../models'
+import { WorkAppContext } from '../../contexts'
+import { checkCanEditProjectDetails, checkCanManageProject } from '../../utils'
+
+import styles from './ProjectPageWrapper.module.scss'
+
+export interface ProjectPageWrapperProps extends PageWrapperProps {
+    projectId: string | undefined
+    headerActions?: ReactNode
+}
+
+export const ProjectPageWrapper: FC<PropsWithChildren<ProjectPageWrapperProps>> = props => {
+    const workAppContext: WorkAppContextModel = useContext(WorkAppContext)
+    // const currentUserId = workAppContext.loginUserInfo?.userId === undefined
+    //     || workAppContext.loginUserInfo?.userId === null
+    //     ? undefined
+    //     : String(workAppContext.loginUserInfo.userId)
+    // const currentUserHandle = toOptionalString(workAppContext.loginUserInfo?.handle)
+    const projectResult = useFetchProject(props.projectId || undefined)
+    const canManageProject = !!projectResult.project
+            && checkCanManageProject(
+                workAppContext.userRoles,
+                workAppContext.loginUserInfo?.userId,
+                projectResult.project,
+            )
+    const canEditProjectDetails = !!projectResult.project
+            && checkCanEditProjectDetails(
+                workAppContext.userRoles,
+                workAppContext.loginUserInfo?.userId,
+                projectResult.project,
+            )
+
+    const pageTitle = projectResult.project?.name
+        ? projectResult.project.name
+        : props.pageTitle
+
+    const projectTabs = props.projectId
+        ? <ProjectListTabs projectId={props.projectId} />
+        : undefined
+
+    const billingAccountExpiredNotice = props.projectId
+        ? (
+            <ProjectBillingAccountExpiredNotice
+                billingAccountId={projectResult.project?.billingAccountId}
+                billingAccountName={projectResult.project?.billingAccountName}
+                canManageProject={canManageProject}
+                displayMemberPaymentDetailsToCopilots={
+                    projectResult.project?.details?.displayMemberPaymentDetailsToCopilots
+                }
+                projectId={props.projectId}
+            />
+        )
+        : undefined
+    const titleAction = props.projectId
+        ? (
+            <div className={styles.projectTitleActions}>
+                {canEditProjectDetails
+                    ? (
+                        <Link
+                            aria-label='Edit project'
+                            className={styles.projectEditLink}
+                            to={`/projects/${props.projectId}/edit`}
+                        >
+                            <IconOutline.PencilIcon className={styles.projectEditIcon} />
+                        </Link>
+                    )
+                    : undefined}
+            </div>
+        )
+        : undefined
+
+    return (
+        <PageWrapper
+            {...props}
+            pageTitle={pageTitle}
+            breadCrumb={props.breadCrumb}
+            titleAction={titleAction}
+        >
+            {billingAccountExpiredNotice}
+            {projectTabs}
+
+            <div className={styles.container}>
+                <div className={styles.headerRow}>
+                    <h4 className={styles.sectionTitle}>{props.pageTitle}</h4>
+
+                    {props.headerActions && (
+                        <div className={styles.headerActions}>
+                            {props.headerActions}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {props.children}
+        </PageWrapper>
+    )
+}

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

@@ -0,0 +1 @@
+export { ProjectPageWrapper } from './ProjectPageWrapper'

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

@@ -18,6 +18,7 @@ export * from './ErrorMessage'
 export * from './form'
 export * from './GroupSuccessModal'
 export * from './LoadingSpinner'
+export * from './ProjectPageWrapper'
 export * from './Pagination'
 export * from './ProjectCard'
 export * from './ProjectBillingAccountExpiredNotice'

src/apps/work/src/pages/showcase/ProjectShowcasePage/ProjectShowcasePage.module.scss

@@ -48,6 +48,12 @@
     max-width: 100%;
 }
 
+.loadingRow,
+.emptyRow {
+    text-align: center;
+    padding: 24px 0;
+}
+
 .tableWrap {
     border: 1px solid $black-10;
     border-radius: 8px;
@@ -247,12 +253,6 @@
     padding: 12px 0;
 }
 
-.loadingRow,
-.emptyRow {
-    text-align: center;
-    padding: 24px 0;
-}
-
 @media (max-width: 1100px) {
     .filters {
         grid-template-columns: repeat(2, minmax(0, 1fr));