PM-1906 - AI workflow - ai review scorecard UI

Author: vas3a

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.module.scss

@@ -0,0 +1,59 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+}
+
+.headerBar {
+    display: flex;
+    align-items: center;
+    gap: $sp-4;
+
+    background: #00797A;
+    padding: $sp-4;
+
+    font-family: "Nunito Sans", sans-serif;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    color: #FFFFFF;
+
+    cursor: pointer;
+    transition: 0.15s ease-in-out;
+
+    &:hover {
+        background: darken(#00797A, 1.5%);
+    }
+
+    &:active {
+        transition: none;
+        background: darken(#00797A, 3%);
+    }
+
+    &.toggled {
+        .toggleBtn {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+
+.index {
+    width: 24px;
+}
+
+.mx {
+    margin: 0 auto;
+}
+
+.toggleBtn {
+    cursor: pointer;
+    width: 24px;
+
+    svg {
+        display: block;
+        width: 16px;
+        height: 16px;
+        transition: 0.15s ease-in-out;
+    }
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.tsx

@@ -0,0 +1,61 @@
+import { FC, useCallback, useMemo } from 'react'
+import classNames from 'classnames'
+
+import { IconOutline } from '~/libs/ui'
+
+import { ScorecardGroup as ScorecardGroupModel } from '../../../../models'
+import { ScorecardSection } from '../ScorecardSection'
+import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
+
+import styles from './ScorecardGroup.module.scss'
+import { ScorecardScore } from '../ScorecardScore'
+import { calcGroupScore } from '../utils'
+
+interface ScorecardGroupProps {
+    index: number
+    group: ScorecardGroupModel
+}
+
+const ScorecardGroup: FC<ScorecardGroupProps> = props => {
+    const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
+    const allFeedbackItems = aiFeedbackItems || [];
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext();
+
+    const isVissible = !toggledItems[props.group.id];
+    const toggle = useCallback(() => toggleItem(props.group.id), [props.group, toggleItem]);
+
+    const score = useMemo(() => (
+        calcGroupScore(props.group, allFeedbackItems)
+    ), [props.group, allFeedbackItems])
+
+    return (
+        <div className={styles.wrap}>
+            <div className={classNames(styles.headerBar, isVissible && styles.toggled)} onClick={toggle}>
+                <span className={styles.index}>
+                    {props.index}.
+                </span>
+                <span>
+                    {props.group.name}
+                </span>
+                <span className={styles.mx} />
+                <span>
+                    <ScorecardScore
+                        score={score}
+                        scaleMax={1}
+                        scaleType='SCALE'
+                        weight={props.group.weight}
+                    />
+                </span>
+                <span className={styles.toggleBtn}>
+                    <IconOutline.ChevronDownIcon />
+                </span>
+            </div>
+
+            {isVissible && props.group.sections.map((section, index) => (
+                <ScorecardSection key={section.id} section={section} index={[props.index, index+1].join('.')} />
+            ))}
+        </div>
+    )
+}
+
+export default ScorecardGroup

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/index.ts

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

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.module.scss

@@ -0,0 +1,7 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    p {
+        margin-bottom: $sp-4;
+    }
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx

@@ -0,0 +1,49 @@
+import { FC, useMemo } from 'react'
+
+import { ScorecardViewerContextValue, useScorecardContext } from '../../ScorecardViewer.context'
+import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
+
+import styles from './AiFeedback.module.scss'
+import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
+import { ScorecardQuestion } from '~/apps/review/src/lib/models'
+import { ScorecardScore } from '../../ScorecardScore'
+
+interface AiFeedbackProps {
+    question: ScorecardQuestion
+}
+
+const AiFeedback: FC<AiFeedbackProps> = props => {
+    const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
+    const feedback = useMemo(() => aiFeedbackItems?.find(r => r.scorecardQuestionId === props.question.id), [props.question.id, aiFeedbackItems])
+
+    if (!aiFeedbackItems?.length || !feedback) {
+        return <></>
+    }
+
+    const isYesNo = props.question.type === 'YES_NO';
+
+    return (
+        <ScorecardQuestionRow
+            icon={<IconAiReview />}
+            index="AI Feedback"
+            className={styles.wrap}
+            score={
+                <ScorecardScore
+                    score={feedback.questionScore}
+                    scaleMax={props.question.scaleMax}
+                    scaleType={props.question.type}
+                    weight={props.question.weight}
+                />
+            }
+        >
+            {isYesNo && (
+                <p>
+                    <strong>{feedback.questionScore ? 'Yes' : 'No'}</strong>
+                </p>
+            )}
+            {feedback.content}
+        </ScorecardQuestionRow>
+    )
+}
+
+export default AiFeedback

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/index.ts

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

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestion.module.scss

@@ -0,0 +1,25 @@
+@import '@libs/ui/styles/includes';
+
+.toggleBtn {
+    cursor: pointer;
+    display: block;
+    width: 16px;
+    height: 16px;
+    color: #767676;
+    transition: 0.15s ease-in-out;
+
+    &.toggled {
+        transform: rotate(180deg);
+    }
+}
+
+.questionText {
+    font-weight: bold;
+    + * {
+        margin-top: $sp-2;
+    }
+}
+
+.guidelines {
+    white-space: pre-wrap;
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestion.tsx

@@ -0,0 +1,51 @@
+import { FC, useCallback } from 'react'
+
+import { IconOutline } from '~/libs/ui'
+
+import { ScorecardQuestion as ScorecardQuestionModel } from '../../../../models'
+
+import styles from './ScorecardQuestion.module.scss'
+import { AiFeedback } from './AiFeedback'
+import { ScorecardQuestionRow } from './ScorecardQuestionRow'
+import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
+import classNames from 'classnames'
+
+interface ScorecardQuestionProps {
+    index: string
+    question: ScorecardQuestionModel
+}
+
+const ScorecardQuestion: FC<ScorecardQuestionProps> = props => {
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext();
+
+    const isToggled = toggledItems[props.question.id!];
+    const toggle = useCallback(() => toggleItem(props.question.id!), [props.question, toggleItem]);
+
+    return (
+        <div className={styles.wrap}>
+            <ScorecardQuestionRow
+                icon={
+                    <IconOutline.ChevronDownIcon
+                        className={classNames(styles.toggleBtn, isToggled && styles.toggled)}
+                        onClick={toggle}
+                    />
+                }
+                index={`Question ${props.index}`}
+                className={styles.headerBar}
+                score=''
+            >
+                <span className={styles.questionText}>
+                    {props.question.description}
+                </span>
+                {isToggled && (
+                    <div className={styles.guidelines}>
+                        {props.question.guidelines}
+                    </div>
+                )}
+            </ScorecardQuestionRow>
+            <AiFeedback question={props.question} />
+        </div>
+    )
+}
+
+export default ScorecardQuestion

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.module.scss

@@ -0,0 +1,18 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    display: grid;
+    gap: $sp-4;
+    padding: $sp-4;
+    grid-template-columns: 24px 128px auto 144px 24px;
+
+    font-family: "Nunito Sans", sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 20px;
+    color: #0A0A0A;
+}
+
+.content {
+    font-weight: normal;
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames'
+import { FC, PropsWithChildren, ReactNode } from 'react'
+
+import styles from './ScorecardQuestionRow.module.scss'
+
+interface ScorecardQuestionRowProps extends PropsWithChildren {
+    className?: string
+    icon?: ReactNode
+    index?: string
+    score?: ReactNode
+}
+
+const ScorecardQuestionRow: FC<ScorecardQuestionRowProps> = props => (
+    <div className={classNames(props.className, styles.wrap)}>
+        <span>{props.icon}</span>
+        <span>{props.index}</span>
+        <span className={styles.content}>{props.children}</span>
+        <span>{props.score}</span>
+    </div>
+)
+
+export default ScorecardQuestionRow