Merge pull request #1014 from stevenfrog/review-management-f2f

review management with merged dev

Author: jmgasper

src/apps/admin/src/admin-app.routes.tsx

@@ -21,13 +21,26 @@ const ManageUserPage: LazyLoadedComponent = lazyLoad(
     'ManageUserPage',
 )
 
+const ReviewManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./review-management/ReviewManagement'),
+)
+const ReviewManagementPage: LazyLoadedComponent = lazyLoad(
+    () => import('./review-management/ReviewManagementPage'),
+    'ReviewManagementPage',
+)
+const ManageReviewerPage: LazyLoadedComponent = lazyLoad(
+    () => import('./review-management/ManageReviewerPage'),
+    'ManageReviewerPage',
+)
+
 export const toolTitle: string = ToolTitle.admin
 export const rootRoute: string
     = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
         ? ''
         : `/${AppSubdomain.admin}`
 
 export const manageChallengeRouteId = 'challenge-management'
+export const manageReviewRouteId = 'review-management'
 
 export const adminRoutes: ReadonlyArray<PlatformRoute> = [
     // Admin App Root
@@ -56,6 +69,24 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: manageChallengeRouteId,
                 route: manageChallengeRouteId,
             },
+            // Reviewer Management Module
+            {
+                children: [
+                    {
+                        element: <ReviewManagementPage />,
+                        id: 'review-management-page',
+                        route: '',
+                    },
+                    {
+                        element: <ManageReviewerPage />,
+                        id: 'manage-reviewer',
+                        route: ':challengeId/manage-reviewer',
+                    },
+                ],
+                element: <ReviewManagement />,
+                id: manageReviewRouteId,
+                route: manageReviewRouteId,
+            },
         ],
         domain: AppSubdomain.admin,
         element: <AdminApp />,

src/apps/admin/src/lib/components/RejectPendingConfirmDialog/RejectPendingConfirmDialog.module.scss

@@ -0,0 +1,8 @@
+.rejectPendingConfirmDialog {
+    .actionButtons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+        padding-top: 32px;
+    }
+}

src/apps/admin/src/lib/components/RejectPendingConfirmDialog/RejectPendingConfirmDialog.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react'
+
+import { BaseModal, Button } from '~/libs/ui'
+
+import { useEventCallback } from '../../hooks'
+
+import styles from './RejectPendingConfirmDialog.module.scss'
+
+interface RejectPendingConfirmDialogProps {
+    open: boolean
+    reject: () => void
+    setOpen: (isOpen: boolean) => void
+}
+
+const RejectPendingConfirmDialog: FC<RejectPendingConfirmDialogProps> = props => {
+    const handleClose = useEventCallback(() => props.setOpen(false))
+    const handleRemove = useEventCallback(() => {
+        props.setOpen(false)
+        props.reject()
+    })
+    return (
+        <BaseModal title='Reject Pending' onClose={handleClose} open={props.open}>
+            <div className={styles.rejectPendingConfirmDialog}>
+                <p>
+                    Are you sure? You want to reject pending?
+                </p>
+                <div className={styles.actionButtons}>
+                    <Button secondary size='lg' onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button primary size='lg' onClick={handleRemove}>
+                        OK
+                    </Button>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default RejectPendingConfirmDialog

src/apps/admin/src/lib/components/RejectPendingConfirmDialog/index.ts

@@ -0,0 +1 @@
+export { default as RejectPendingConfirmDialog } from './RejectPendingConfirmDialog'

src/apps/admin/src/lib/components/ReviewSummaryList/MobileListView/MobileListView.module.scss

@@ -0,0 +1,70 @@
+@import '@libs/ui/styles/includes';
+@import '@libs/ui/styles/typography';
+
+.mobileListView {
+    > *:nth-child(odd) {
+        background: $black-5;
+    }
+}
+
+.mobileListViewItemContainer {
+    display: grid;
+    grid-template-columns: 58px 1fr;
+    padding: $sp-4;
+    border-radius: $sp-2;
+    margin-top: 16px;
+    grid-template-columns: 1fr;
+
+    .rows {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .row1,
+        .row2,
+        .row3,
+        .row4,
+        .row5,
+        .row6,
+        .row7 {
+            display: grid;
+            gap: 16px 32px;
+            align-items: center;
+        }
+
+        .row1 {
+            grid-template-columns: 1fr auto;
+
+            button {
+                white-space: break-spaces;
+            }
+        }
+
+        .row2,
+        .row3,
+        .row4 {
+            grid-template-columns: 1fr auto;
+        }
+
+        .row5 {
+            justify-content: flex-end;
+        }
+    }
+
+    @media (max-width: 567px) {
+        gap: 8px;
+    }
+}
+
+.propertyElement {
+    @extend .medium-subtitle;
+    word-break: break-word;
+    width: fit-content;
+}
+
+.propertyElementLabel {
+  color: $black-60;
+  font-size: 11px;
+  line-height: 14px;
+  text-transform: uppercase;
+}

src/apps/admin/src/lib/components/ReviewSummaryList/MobileListView/MobileListView.tsx

@@ -0,0 +1,99 @@
+import { FC } from 'react'
+
+import { TableColumn } from '~/libs/ui/lib/components/table'
+
+import { ReviewSummary } from '../../../models'
+
+import styles from './MobileListView.module.scss'
+
+type Property<T> = TableColumn<T>
+
+export interface MobileListViewProps<T> {
+    properties: ReadonlyArray<Property<T>>
+    data: T[]
+}
+
+const PropertyElement = <T, >(props: Property<T> & { data: T }): JSX.Element => {
+    let item: JSX.Element | undefined
+    switch (props.type) {
+        case 'element': {
+            item = props.renderer?.(props.data)
+            break
+        }
+
+        case 'action': {
+            item = props.renderer?.(props.data)
+            break
+        }
+
+        case 'text':
+        case 'number': {
+            item = (
+                <>
+                    {props.propertyName
+                        ? (props.data as { [K: string]: unknown })[
+                            props.propertyName
+                        ]
+                        : undefined}
+                </>
+            )
+            break
+        }
+
+        default: {
+            item = undefined
+        }
+    }
+
+    return <div className={styles.propertyElement}>{item}</div>
+}
+
+const MobileListView: FC<MobileListViewProps<ReviewSummary>> = props => {
+    const renderListItem = (d: ReviewSummary): JSX.Element => {
+        const propertyElements = props.properties.map(p => (
+            <PropertyElement
+                propertyName={p.propertyName}
+                renderer={p.renderer}
+                type={p.type}
+                data={d}
+            />
+        ))
+
+        const propertyElementLabels = props.properties.map(p => (
+            <div className={styles.propertyElementLabel}>{`${p.label}`}</div>
+        ))
+
+        return (
+            <div className={styles.mobileListViewItemContainer} key={d.legacyChallengeId}>
+                <div className={styles.rows}>
+                    <div className={styles.row1}>
+                        {/* Title */ propertyElements[1]}
+                        {/* Status  */ propertyElements[4]}
+                    </div>
+                    <div className={styles.row2}>
+                        {/* Legacy ID */ propertyElements[2]}
+                    </div>
+                    <div className={styles.row3}>
+                        {propertyElementLabels[5]}
+                        {/* Open Review Opp' */ propertyElements[5]}
+                    </div>
+                    <div className={styles.row4}>
+                        {propertyElementLabels[6]}
+                        {/* Review Applications */ propertyElements[6]}
+                    </div>
+                    <div className={styles.row5}>
+                        {/* Action */ propertyElements[7]}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.mobileListView}>
+            {props.data.map(renderListItem)}
+        </div>
+    )
+}
+
+export default MobileListView

src/apps/admin/src/lib/components/ReviewSummaryList/MobileListView/index.ts

@@ -0,0 +1,2 @@
+export * from './MobileListView'
+export { default as MobileListView } from './MobileListView'

src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss

@@ -0,0 +1,34 @@
+@import '@libs/ui/styles/includes';
+@import '../../styles';
+
+.reviewSummaryList {
+    padding: 0 15px;
+
+    table tbody tr td:nth-last-child(3) {
+      text-align: center;
+    }
+}
+
+.challengeTitle {
+    min-width: 200px;
+    padding: 0;
+    justify-content: flex-start;
+    border-radius: 0;
+    color: $body-color;
+    line-height: 16px;
+    white-space: break-spaces;
+
+    &:hover {
+        color: $blue-110;
+    }
+}
+
+.rowActions {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    > * {
+        flex: none;
+    }
+}