Merge pull request #1267 from topcoder-platform/PM-1904_active-challenges-page

PM-1904 active challenges page

Author: vas3a

src/apps/review/src/lib/assets/icons/icon-ai-review.svg

@@ -2,6 +2,13 @@ import { ReactComponent as IconArrowLeft } from './arrow-left.svg'
 import { ReactComponent as IconExternalLink } from './external-link.svg'
 import { ReactComponent as IconChevronDown } from './selector.svg'
 import { ReactComponent as IconError } from './icon-error.svg'
+import { ReactComponent as IconAiReview } from './icon-ai-review.svg'
+import { ReactComponent as IconSubmission } from './icon-phase-submission.svg'
+import { ReactComponent as IconRegistration } from './icon-phase-registration.svg'
+import { ReactComponent as IconReview } from './icon-phase-review.svg'
+import { ReactComponent as IconAppeal } from './icon-phase-appeal.svg'
+import { ReactComponent as IconAppealResponse } from './icon-phase-appeal-response.svg'
+import { ReactComponent as IconPhaseWinners } from './icon-phase-winners.svg'
 
 export * from './editor/bold'
 export * from './editor/code'
@@ -19,4 +26,24 @@ export * from './editor/table'
 export * from './editor/unordered-list'
 export * from './editor/upload-file'
 
-export { IconArrowLeft, IconExternalLink, IconChevronDown, IconError }
+export {
+    IconArrowLeft,
+    IconExternalLink,
+    IconChevronDown,
+    IconError,
+    IconAiReview,
+    IconSubmission,
+    IconReview,
+    IconAppeal,
+    IconAppealResponse,
+    IconPhaseWinners,
+}
+
+export const phasesIcons = {
+    appeal: IconAppeal,
+    appealResponse: IconAppealResponse,
+    'iterative review': IconReview,
+    registration: IconRegistration,
+    review: IconReview,
+    submission: IconSubmission,
+}

src/apps/review/src/lib/assets/icons/icon-phase-appeal-response.svg

@@ -79,3 +79,7 @@
     background-color: $red-25;
     color: $red-140;
 }
+
+.mr2 {
+    margin-right: $sp-2;
+}

src/apps/review/src/lib/assets/icons/icon-phase-appeal.svg

@@ -17,6 +17,7 @@ import {
 } from '../../models'
 import { TableWrapper } from '../TableWrapper'
 import { ProgressBar } from '../ProgressBar'
+import { IconAiReview, phasesIcons } from '../../assets/icons'
 
 import styles from './TableActiveReviews.module.scss'
 
@@ -253,11 +254,20 @@ export const TableActiveReviews: FC<Props> = (props: Props) => {
                         isSortable: true,
                         label: 'Phase',
                         propertyName: 'currentPhase',
-                        renderer: (data: ActiveReviewAssignment) => (
-                            <div className={styles.phase}>
-                                {data.currentPhase}
-                            </div>
-                        ),
+                        renderer: (data: ActiveReviewAssignment) => {
+                            const Icon = data.hasAIReview ? IconAiReview : (
+                                phasesIcons[data.currentPhase.toLowerCase() as keyof typeof phasesIcons]
+                            )
+
+                            return (
+                                <div className={styles.phase}>
+                                    {Icon && (
+                                        <Icon className={styles.mr2} />
+                                    )}
+                                    {data.currentPhase}
+                                </div>
+                            )
+                        },
                         type: 'element',
                     },
                     {