Merge branch 'PM-1502-scorecards' of github.com:topcoder-platform/platform-ui into PM-1505_clone-scorecard

vas3a · vas3a · commit 05a2c7708dee · 2025-08-13T09:11:04.000+03:00
diff --git a/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss b/src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss
@@ -6,18 +6,49 @@
     justify-content: flex-end;
     align-items: center;
     padding: 16px 0;
-    gap: $sp-4;
+    gap: $sp-2;
+
+    .pageNumbers button,
+    .previous,
+    .disabled,
+    .first,
+    .last,
+    .next {
+        box-shadow: none;
+        border: 1px solid #E9ECEF;
+        border-radius: 4px;
+        color: #0A0A0A;
+        font-weight: 400;
+        font-size: 14px;
+    }
+
+    .previous,
+    .first,
+    .last,
+    .next {
+        padding: 7px 11px;
+
+        &:disabled {
+            background-color: #E9ECEF !important;
+        }
+    }
+    
 
     .pageNumbers {
         display: flex;
         justify-content: center;
         align-items: center;
-        gap: $sp-1;
+        gap: $sp-2;
+
+        button {
+         padding: 3px 12px;
+        }
 
         button.active {
             color: $black-60;
             pointer-events: none;
-            box-shadow: inset 0 0 0 2px #{$black-60};
+            background-color: $teal-160;
+            color: white;
         }
     }
 
@@ -35,4 +66,8 @@
     @media (max-width: #{$mobile-max}) {
         justify-content: center;
     }
+
+    :global(.btn-style-secondary) {
+        box-shadow: none !important;
+    }
 }
diff --git a/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx b/src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx
@@ -74,7 +74,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronDoubleLeftIcon}
                 iconToLeft
-                label='FIRST'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.first}
             />
@@ -84,7 +83,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronLeftIcon}
                 iconToLeft
-                label='PREVIOUS'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.previous}
             />
@@ -93,7 +91,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     <Button
                         key={`page-${i}`}
                         secondary
-                        variant='round'
                         label={`${i}`}
                         onClick={createHandlePageClick(i)}
                         className={i === props.page ? styles.active : ''}
@@ -107,7 +104,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronRightIcon}
                 iconToRight
-                label='NEXT'
                 disabled={props.page === totalPages || props.disabled}
                 className={styles.next}
             />
@@ -118,7 +114,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     size='md'
                     icon={IconOutline.ChevronDoubleRightIcon}
                     iconToRight
-                    label='LAST'
                     disabled={props.page === totalPages || props.disabled}
                     className={styles.last}
                 />
diff --git a/src/apps/review/src/config/routes.config.ts b/src/apps/review/src/config/routes.config.ts
@@ -13,3 +13,4 @@ export const openOpportunitiesRouteId = 'open-opportunities'
 export const pastReviewAssignmentsRouteId = 'past-review-assignments'
 export const challengeDetailRouteId = ':challengeId'
 export const scorecardRouteId = 'scorecard'
+export const viewScorecardRouteId = ':scorecardId'
diff --git a/src/apps/review/src/lib/components/TableScorecards/TableScorecards.module.scss b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.module.scss
@@ -36,3 +36,9 @@
     text-align: center;
 }
 
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
diff --git a/src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx b/src/apps/review/src/lib/components/TableScorecards/TableScorecards.tsx
@@ -1,6 +1,6 @@
 /**
  * Table Active Reviews.
-*/
+ */
 import { Dispatch, FC, SetStateAction, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { bind, noop } from 'lodash'
@@ -21,6 +21,8 @@ import styles from './TableScorecards.module.scss'
 interface Props {
     className?: string
     datas: Scorecard[]
+    metadata?: any
+    perPage?: number
     totalPages: number
     page: number
     setPage: Dispatch<SetStateAction<number>>
@@ -44,7 +46,7 @@ export const TableScorecards: FC<Props> = (props: Props) => {
                 label: 'Scorecard',
                 propertyName: 'name',
                 renderer: (data: Scorecard) => (
-                    <Link to={`${data.id}/details`}>
+                    <Link to={`${data.id}`}>
                         {data.name}
                     </Link>
                 ),
@@ -149,11 +151,24 @@ export const TableScorecards: FC<Props> = (props: Props) => {
                     className='enhanced-table-desktop'
                 />
             )}
-            <Pagination
-                page={props.page}
-                totalPages={props.totalPages}
-                onPageChange={props.setPage}
-            />
+            <div className={styles.pagination}>
+                <div>
+                    Showing 1-
+                    {props.perPage}
+                    {' '}
+                    of
+                    {' '}
+                    {props.metadata.total}
+                    {' '}
+                    results
+                </div>
+                <Pagination
+                    page={props.page}
+                    totalPages={props.totalPages}
+                    onPageChange={props.setPage}
+                />
+            </div>
+
         </TableWrapper>
     )
 }
diff --git a/src/apps/review/src/lib/hooks/useFetchScorecards.ts b/src/apps/review/src/lib/hooks/useFetchScorecards.ts
@@ -10,7 +10,7 @@ interface UseFetchScorecardsParams {
   perPage: number
   name?: string
   challengeTrack?: string
-  type?: string
+  scorecardType?: string
   challengeType?: string
   status?: string
 }
@@ -33,15 +33,15 @@ export function useFetchScorecards(
         name = '',
         challengeTrack = '',
         challengeType = '',
+        scorecardType = '',
         status = '',
-        type = '',
     }: UseFetchScorecardsParams,
 ): ScorecardsResponse {
     const query = new URLSearchParams({
         page: String(page),
         perPage: String(perPage),
         ...(name ? { name } : {}),
-        ...(type ? { type } : {}),
+        ...(scorecardType ? { scorecardType } : {}),
         ...(challengeTrack ? { challengeTrack } : {}),
         ...(challengeType ? { challengeType } : {}),
         ...(status ? { status } : {}),
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx b/src/apps/review/src/pages/scorecards/ScorecardsContainer.tsx
@@ -0,0 +1,40 @@
+/**
+ * The router outlet.
+ */
+
+import { FC, PropsWithChildren, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes, useLocation } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { reviewRoutes } from '../../review-app.routes'
+import { scorecardRouteId } from '../../config/routes.config'
+
+export const ScorecardsContainer: FC<PropsWithChildren> = () => {
+    const location = useLocation()
+    const childRoutes = useChildRoutes()
+
+    useEffect(() => {
+        window.scrollTo(0, 0)
+    }, [location.pathname])
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => reviewRoutes[0].children
+            ?.find(r => r.id === scorecardRouteId)
+            ?.children?.map(getRouteElement),
+        [getRouteElement],
+    )
+    return childRoutes
+}
+
+export default ScorecardsContainer
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.module.scss b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.module.scss
@@ -0,0 +1,3 @@
+.totalScorecards {
+    margin-top: 10px;
+}
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx b/src/apps/review/src/pages/scorecards/ScorecardsListPage/ScorecardsListPage.tsx
@@ -5,14 +5,12 @@ import { toast } from 'react-toastify'
 import { PageTitle, useConfirmationModal } from '~/libs/ui'
 import { TableLoading } from '~/apps/admin/src/lib'
 
-import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../lib'
-import { ScorecardsResponse, useFetchScorecards } from '../../lib/hooks'
-import { cloneScorecard } from '../../lib/services'
-import { Scorecard } from '../../lib/models'
+import { Scorecard } from '../../../lib/models'
+import { cloneScorecard } from '../../../lib/services'
+import { PageWrapper, ScorecardsFilter, TableNoRecord, TableScorecards } from '../../../lib'
+import { ScorecardsResponse, useFetchScorecards } from '../../../lib/hooks'
 
-// import { mockScorecards } from '../../mock-datas/MockScorecardList'
-
-// import styles from './ScorecardsListPage.module.scss'
+import styles from './ScorecardsListPage.module.scss'
 
 export const ScorecardsListPage: FC<{}> = () => {
     const navigate = useNavigate()
@@ -26,29 +24,30 @@ export const ScorecardsListPage: FC<{}> = () => {
         type: '',
     })
     const [page, setPage] = useState(1)
+    const perPage = 10
 
     const breadCrumb = useMemo(
         () => [{ index: 1, label: 'Scorecards' }],
         [],
     )
-    // const scorecards: Scorecard[] = mockScorecards
 
     const {
         scoreCards: scorecards,
         metadata,
         isValidating: isLoadingScorecards,
     }: ScorecardsResponse = useFetchScorecards({
         challengeTrack: filters.projectType,
+        challengeType: filters.category,
         name: filters.name,
         page,
-        perPage: 10,
+        perPage,
+        scorecardType: filters.type,
         status: filters.status,
-        type: filters.type,
     })
 
-    const handleFiltersChange = useCallback((newFilters: Partial<typeof filters>) => {
-        setFilters(newFilters as typeof filters)
-        setPage(1) // Optional: reset page on filter change
+    const handleFiltersChange = useCallback((newFilters: typeof filters) => {
+        setFilters(newFilters)
+        setPage(1)
     }, [])
 
     const handleScorecardClone = useCallback(async (scorecard: Scorecard) => {
@@ -81,6 +80,11 @@ export const ScorecardsListPage: FC<{}> = () => {
             breadCrumb={breadCrumb}
         >
             <PageTitle>Scorecards</PageTitle>
+            <div className={styles.totalScorecards}>
+                {metadata?.total}
+                {' '}
+                scorecards
+            </div>
             <ScorecardsFilter
                 filters={filters}
                 onFiltersChange={handleFiltersChange}
@@ -97,7 +101,12 @@ export const ScorecardsListPage: FC<{}> = () => {
                             totalPages={metadata?.totalPages}
                             page={page}
                             setPage={setPage}
-                            datas={scorecards}
+                            datas={scorecards.map((item, i) => ({
+                                ...item,
+                                index: (page - 1) * perPage + i + 1,
+                            }))}
+                            metadata={metadata}
+                            perPage={perPage}
                         />
                     )}
 
diff --git a/src/apps/review/src/pages/scorecards/ScorecardsListPage/index.ts b/src/apps/review/src/pages/scorecards/ScorecardsListPage/index.ts
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.module.scss b/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.module.scss
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx b/src/apps/review/src/pages/scorecards/ViewScorecardPage/ViewScorecardPage.tsx
@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+const ViewScorecardPage: FC = () => (
+    <div>View scorecard</div>
+)
+
+export default ViewScorecardPage
diff --git a/src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts b/src/apps/review/src/pages/scorecards/ViewScorecardPage/index.ts
@@ -0,0 +1 @@
+export { default as ViewScorecardPage } from './ViewScorecardPage'
diff --git a/src/apps/review/src/review-app.routes.tsx b/src/apps/review/src/review-app.routes.tsx
@@ -37,11 +37,21 @@ const ScorecardDetailsPage: LazyLoadedComponent = lazyLoad(
     'ScorecardDetailsPage',
 )
 
+const ScorecardsContainer: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ScorecardsContainer'),
+    'ScorecardsContainer',
+)
+
 const ScorecardsListPage: LazyLoadedComponent = lazyLoad(
     () => import('./pages/scorecards/ScorecardsListPage'),
     'ScorecardsListPage',
 )
 
+const ViewScorecardPage: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/scorecards/ViewScorecardPage'),
+    'ViewScorecardPage',
+)
+
 export const toolTitle: string = ToolTitle.review
 
 export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
@@ -85,7 +95,20 @@ export const reviewRoutes: ReadonlyArray<PlatformRoute> = [
                 route: activeReviewAssigmentsRouteId,
             },
             {
-                element: <ScorecardsListPage />,
+                children: [
+                    {
+                        element: <ScorecardsListPage />,
+                        id: 'list-scorecards-page',
+                        route: '',
+                    },
+                    {
+                        element: <ViewScorecardPage />,
+                        id: 'view-scorecard-page',
+                        route: ':scorecardId',
+                    },
+
+                ],
+                element: <ScorecardsContainer />,
                 id: scorecardRouteId,
                 route: scorecardRouteId,
             },
diff --git a/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx b/src/apps/wallet-admin/src/lib/components/payment-method-table/PaymentMethodTable.tsx
@@ -29,6 +29,7 @@ const PaymentProviderTable: React.FC<PaymentMethodTableProps> = (props: PaymentM
                         <th className='body-ultra-small-bold'>CONNECTED PROVIDER</th>
                         <th className='body-ultra-small-bold'>PROVIDER ID</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>
diff --git a/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx b/src/apps/wallet-admin/src/lib/components/tax-forms-table/TaxFormTable.tsx
@@ -30,6 +30,7 @@ const TaxFormTable: React.FC<TaxFormTableProps> = (props: TaxFormTableProps) =>
                         <th className='body-ultra-small-bold'>FORM</th>
                         <th className='body-ultra-small-bold'>DATE FILED</th>
                         <th className='body-ultra-small-bold'>STATUS</th>
+                        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                         <th className='body-ultra-small'> </th>
                     </tr>
                 </thead>
diff --git a/src/libs/ui/lib/styles/variables/_palette.scss b/src/libs/ui/lib/styles/variables/_palette.scss

Original file line number	Diff line number	Diff line change
`@@ -36,3 +36,9 @@`
`36`	`36`	`text-align: center;`
`37`	`37`	`}`
`38`	`38`
	`39`	`+.pagination {`
	`40`	`+ display: flex;`
	`41`	`+ justify-content: space-between;`
	`42`	`+ align-items: center;`
	`43`	`+}`
	`44`	`+`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.totalScorecards {`
	`2`	`+ margin-top: 10px;`
	`3`	`+}`