feat(PM-1503): View scorecard implementation

src/apps/review/src/lib/hooks/useFetchScorecard.ts

@@ -0,0 +1,27 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+import { Scorecard } from '../models'
+
+interface UseFetchScorecardParams {
+  id: string;
+}
+const baseUrl = `${EnvironmentConfig.API.V6}/review`
+
+export function useFetchScorecard(
+    {
+        id,
+    }: UseFetchScorecardParams,
+): Scorecard {
+
+    const fetcher = (url: string): Promise<Scorecard> => xhrGetAsync<Scorecard>(url)
+
+    const { data }: SWRResponse<Scorecard, any> = useSWR<Scorecard>(
+        `${baseUrl}/scorecards/${id}`,
+        fetcher,
+    )
+
+    return data as Scorecard
+}

src/apps/review/src/lib/models/Scorecard.model.ts

@@ -2,6 +2,8 @@
  * Scorecard
  */
 
+import { ScorecardGroup } from './ScorecardGroup.model'
+
 export enum ProjectType {
   DEVELOPMENT = 'DEVELOPMENT',
   DATA_SCIENCE = 'DATA_SCIENCE',
@@ -94,4 +96,9 @@ export interface Scorecard {
     category: string
     status: ScorecardStatus
     index?: number
+    version: string
+    challengeType: string
+    minScore: number
+    maxScore: number
+    scorecardGroups: ScorecardGroup[]
 }

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardDetails/ScorecardDetails.module.scss

@@ -0,0 +1,53 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    padding: 32px;
+    background-color: #F6F7F9;
+    margin-top: 20px;
+    border-radius: 8px;
+    .left {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    .item {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 20px;
+        .label {
+            font-weight: 700;
+            font-family: "Nunito Sans", sans-serif;
+            font-size: 16px;
+            color: #000000;
+            margin-bottom: 6px;
+        }
+        .value {
+            font-weight: 400;
+            font-family: "Nunito Sans", sans-serif;
+            font-size: 16px;
+            color: #0A0A0A;
+            text-transform: capitalize;
+            &.active {
+                color: #00797A;
+            }
+
+            &.inactive, &.deleted {
+                color: #767676;
+                font-family: 'Inter', sans-serif;
+                font-weight: 600;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .right {
+        display: flex;
+        flex: 3;
+        flex-direction: column;
+        .item {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardDetails/ScorecardDetails.tsx

@@ -0,0 +1,52 @@
+import { FC } from 'react'
+import cn from 'classnames'
+
+import { ProjectTypeLabels, Scorecard, ScorecardStatusLabels, ScorecardTypeLabels } from '~/apps/review/src/lib/models'
+
+import styles from './ScorecardDetails.module.scss'
+
+interface ScorecardDetailsProps {
+    scorecard: Scorecard
+}
+
+const ScorecardDetails: FC<ScorecardDetailsProps> = (props: ScorecardDetailsProps) => {
+    const getStatusClassname = (): string => styles[ScorecardStatusLabels[props.scorecard.status]?.toLowerCase()]
+    return (
+        <div className={styles.container}>
+            <div className={styles.left}>
+                <div className={styles.item}>
+                    <div className={styles.label}>Version</div>
+                    <div className={styles.value}>{props.scorecard.version}</div>
+                </div>
+                <div className={styles.item}>
+                    <div className={styles.label}>Type</div>
+                    <div className={styles.value}>{ScorecardTypeLabels[props.scorecard.type]}</div>
+                </div>
+                <div className={styles.item}>
+                    <div className={styles.label}>Project Type</div>
+                    <div className={styles.value}>{ProjectTypeLabels[props.scorecard.challengeTrack]}</div>
+                </div>
+            </div>
+            <div className={styles.right}>
+                <div className={styles.item}>
+                    <div className={styles.label}>Category</div>
+                    <div className={styles.value}>{props.scorecard.challengeType}</div>
+                </div>
+                <div className={styles.item}>
+                    <div className={styles.label}>Status</div>
+                    <div
+                        className={cn(styles.value, getStatusClassname())}
+                    >
+                        {ScorecardStatusLabels[props.scorecard.status]}
+                    </div>
+                </div>
+                <div className={styles.item}>
+                    <div className={styles.label}>Min - Max. Score</div>
+                    <div className={styles.value}>{`${props.scorecard.minScore} - ${props.scorecard.maxScore}`}</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ScorecardDetails

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardDetails/index.ts

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

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardGroups/ScorecardGroups.module.scss

@@ -0,0 +1,48 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    margin-top: 32px;
+    .group {
+        .heading {
+            padding: 12px 16px;
+            background-color: #0F172A;
+            color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+            .groupNumber {
+                font-size: 14px;
+                font-family: "Nunito Sans", sans-serif;
+                font-weight: 400;
+            }
+            .groupInfo {
+                display: flex;
+                flex-direction: row;
+                font-size: 16px;
+                font-family: "Nunito Sans", sans-serif;
+                margin-top: 4px;
+                .name {
+                    display: flex;
+                    flex: 1;
+                    font-weight: 700;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: #{$lg-max}) {
+    .container {
+        .group {
+            .heading {
+                .groupInfo {
+                    flex-direction: column;
+                    .name {
+                        margin-bottom: 8px;
+                    }
+                }
+            }
+        }
+    }
+}

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardGroups/ScorecardGroups.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react'
+
+import { ScorecardGroup } from '~/apps/review/src/lib/models'
+
+import ScorecardSections from '../ScorecardSections/ScorecardSections'
+
+import styles from './ScorecardGroups.module.scss'
+
+interface ScorecardGroupsProps {
+    groups: ScorecardGroup[]
+}
+
+const ScorecardGroups: FC<ScorecardGroupsProps> = (props: ScorecardGroupsProps) => (
+    <div className={styles.container}>
+        {
+            props.groups.map((group, index) => (
+                <div key={group.id} className={styles.group}>
+                    <div className={styles.heading}>
+                        <div className={styles.groupNumber}>{`Group ${index + 1}`}</div>
+                        <div className={styles.groupInfo}>
+                            <div className={styles.name}>{group.name}</div>
+                            <div>{group.weight}</div>
+                        </div>
+                    </div>
+                    <ScorecardSections sections={group.sections} />
+                </div>
+            ))
+        }
+    </div>
+)
+
+export default ScorecardGroups

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardGroups/index.ts

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

src/apps/review/src/pages/scorecards/ViewScorecardPage/ScorecardSections/ScorecardSections.module.scss

@@ -0,0 +1,107 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background-color: #E0E4E84D;
+    padding: 40px 32px;
+    .section {
+        .heading {
+            padding: 12px 16px;
+            background-color: #00797A;
+            color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+            .sectionInfo {
+                display: flex;
+                flex-direction: row;
+                margin-top: 4px;
+                font-size: 16px;
+                font-family: "Nunito Sans", sans-serif;
+                .name {
+                    display: flex;
+                    flex: 1;
+                    font-weight: 700;
+                }
+            }
+        }
+        .questions {
+            background-color: #FFFFFF;
+            padding: 32px 20px;
+            .question {
+                background-color: #F6F7F9;
+                padding: 20px 16px;
+                display: flex;
+                flex-direction: row;
+                color: #0A0A0A;
+                margin-bottom: 0px;
+                &.notLast {
+                    margin-bottom: 20px;
+                }
+                .left {
+                    display: flex;
+                    flex: 4;
+                    flex-direction: column;
+                    .description {
+                        font-weight: 700;
+                        font-size: 16px;
+                    }
+                    .detailItemsWrapper {
+                        margin-top: 16px;
+                        .detailItem {
+                            display: flex;
+                            flex-direction: row;
+                            font-family: "Nunito Sans", sans-serif;
+                            margin-bottom: 8px;
+                            .label {
+                                font-weight: 700;
+                                font-size: 14px;
+                                min-width: 142px;
+                            }
+                            .value {
+                                font-weight: 400;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+                .right {
+                    display: flex;
+                    flex: 1;
+                    justify-content: flex-end;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: #{$lg-max}) {
+    .container {
+        .section {
+            .heading {
+                .sectionInfo {
+                    flex-direction: column;
+                    .name {
+                        margin-bottom: 4px;
+                    }
+                }
+            }
+            .questions { 
+                .question {
+                    flex-direction: column;
+                    .left {
+                        .detailItemsWrapper {
+                            .detailItem {
+                                flex-direction: column;
+                                min-width: auto;
+                            }
+                        }
+                    }
+                    .right {
+                        justify-content: flex-start;
+                    }
+                }
+            }
+        }
+    }
+}