From eaf1b23519a2bd6812c2121c103d6d11f29a86c1 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 26 Nov 2025 22:35:41 +0100
Subject: [PATCH] fix: added back button, ui issues

---
 .../src/lib/components/Tabs/Tabs.module.scss  |  3 ++
 src/apps/review/src/lib/styles/index.scss     |  4 ++
 .../AiReviewViewer/AiReviewViewer.module.scss |  5 +++
 .../AiReviewViewer/AiReviewViewer.tsx         | 44 +++++++++++++++++--
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/apps/review/src/lib/components/Tabs/Tabs.module.scss b/src/apps/review/src/lib/components/Tabs/Tabs.module.scss
index ecdad49f2..703dc74e3 100644
--- a/src/apps/review/src/lib/components/Tabs/Tabs.module.scss
+++ b/src/apps/review/src/lib/components/Tabs/Tabs.module.scss
@@ -138,6 +138,9 @@
         }
         .blockItem {
             position: relative;
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
             &.selected {
                 background-color: var(--Actived);
                 color: var(--invertButtonColor);
diff --git a/src/apps/review/src/lib/styles/index.scss b/src/apps/review/src/lib/styles/index.scss
index b37daca2f..b284ffaea 100644
--- a/src/apps/review/src/lib/styles/index.scss
+++ b/src/apps/review/src/lib/styles/index.scss
@@ -37,6 +37,10 @@ $icons: review appeal submission warning error event timer upload reopen 1st 2nd
         flex-shrink: 0;
         height: 20px;
         width: 20px;
+        @include ltemd {
+            height: 30px;
+            width: 30px;
+        }
     }
 }
 
diff --git a/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.module.scss b/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.module.scss
index 62db51d1b..2f7d3fc96 100644
--- a/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.module.scss
+++ b/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.module.scss
@@ -15,4 +15,9 @@
     color: var(--FontColor);
     font-weight: normal;
     margin-left: 4px;
+    @include ltemd {
+        &.selected {
+            color: var(--invertButtonColor);
+        }
+    }
 }
diff --git a/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.tsx b/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.tsx
index 98b38c7f8..6b17ab1d4 100644
--- a/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.tsx
+++ b/src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.tsx
@@ -1,17 +1,21 @@
-import { FC, useMemo, useState } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
+import { mutate } from 'swr'
+import classNames from 'classnames'
 
-import { Tabs } from '~/apps/review/src/lib'
+import { Tabs, useChallengeDetailsContext } from '~/apps/review/src/lib'
 import { ScorecardViewer } from '~/apps/review/src/lib/components/Scorecard'
 import { ScorecardAttachments } from '~/apps/review/src/lib/components/Scorecard/ScorecardAttachments'
 import {
     AiWorkflowRunAttachmentsResponse,
     AiWorkflowRunItemsResponse,
     AiWorkflowRunStatusEnum,
+    useAppNavigate,
     useFetchAiWorkflowsRunAttachments,
     useFetchAiWorkflowsRunItems,
 } from '~/apps/review/src/lib/hooks'
-import { ReviewsContextModel, SelectOption } from '~/apps/review/src/lib/models'
+import { ChallengeDetailContextModel, ReviewsContextModel, SelectOption } from '~/apps/review/src/lib/models'
 import { AiWorkflowRunStatus } from '~/apps/review/src/lib/components/AiReviewsTable'
+import { rootRoute } from '~/apps/review/src/config/routes.config'
 
 import { ScorecardHeader } from '../ScorecardHeader'
 import { useReviewsContext } from '../../ReviewsContext'
@@ -28,12 +32,21 @@ const AiReviewViewer: FC = () => {
     )
     const { totalCount }: AiWorkflowRunAttachmentsResponse
         = useFetchAiWorkflowsRunAttachments(workflowId, workflowRun?.id)
+    const {
+        challengeInfo,
+    }: ChallengeDetailContextModel = useChallengeDetailsContext()
+    const navigate = useAppNavigate()
 
     const tabItems: SelectOption[] = [
         {
             indicator: workflowRun && (
                 <>
-                    <span className={styles.tabScore}>{workflowRun?.score ?? ''}</span>
+                    <span className={classNames(styles.tabScore, {
+                        [styles.selected]: selectedTab === 'scorecard',
+                    })}
+                    >
+                        {workflowRun?.score ?? ''}
+                    </span>
                     <AiWorkflowRunStatus
                         run={workflowRun}
                         hideLabel
@@ -52,6 +65,28 @@ const AiReviewViewer: FC = () => {
         ].includes(workflowRun.status)
     ), [workflowRun])
 
+    const back = useCallback(async (e?: React.MouseEvent<HTMLAnchorElement>) => {
+        e?.preventDefault()
+        try {
+            if (challengeInfo?.id) {
+                // Ensure the challenge details reflect the latest data (e.g., active phase)
+                await mutate(`challengeBaseUrl/challenges/${challengeInfo?.id}`)
+            }
+        } catch {
+            // no-op: navigation should still occur even if revalidation fails
+        }
+
+        const pastPrefix = '/past-challenges/'
+        // eslint-disable-next-line no-restricted-globals
+        const idx = location.pathname.indexOf(pastPrefix)
+        const url = idx > -1
+            ? `${rootRoute}/past-challenges/${challengeInfo?.id}/challenge-details`
+            : `${rootRoute}/active-challenges/${challengeInfo?.id}/challenge-details`
+        navigate(url, {
+            fallback: './../../../../challenge-details',
+        })
+    }, [challengeInfo?.id, mutate, navigate])
+
     return (
         <div className={styles.wrap}>
 
@@ -74,6 +109,7 @@ const AiReviewViewer: FC = () => {
                             scorecard={scorecard}
                             aiFeedback={runItems}
                             setActionButtons={setActionButtons}
+                            navigateBack={back}
                         />
                     )}