From 2ee1f115bc85da9ce401169b072df4cd5f5bfaed Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 7 May 2025 02:03:24 +0200
Subject: [PATCH 1/5] feat: list copilot applications

---
 .../copilots/src/models/CopilotApplication.ts |  1 +
 .../copilot-opportunity-details/index.tsx     | 71 ++++++++++++-------
 .../styles.module.scss                        | 34 ---------
 .../config/copilot-details-tabs-config.ts     | 55 ++++++++++++++
 .../CopilotApplications.tsx                   | 71 +++++++++++++++++++
 .../tabs/copilot-applications/index.ts        |  1 +
 .../copilot-applications/styles.module.scss   |  0
 .../OpportunityDetails.tsx                    | 35 +++++++++
 .../tabs/opportunity-details/index.ts         |  1 +
 .../opportunity-details/styles.module.scss    | 36 ++++++++++
 src/apps/copilots/src/services/members.ts     | 70 ++++++++++++++++++
 11 files changed, 317 insertions(+), 58 deletions(-)
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/index.ts
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/styles.module.scss
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/index.ts
 create mode 100644 src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/styles.module.scss
 create mode 100644 src/apps/copilots/src/services/members.ts

diff --git a/src/apps/copilots/src/models/CopilotApplication.ts b/src/apps/copilots/src/models/CopilotApplication.ts
index d9ab68ed5..d3c85daa9 100644
--- a/src/apps/copilots/src/models/CopilotApplication.ts
+++ b/src/apps/copilots/src/models/CopilotApplication.ts
@@ -3,4 +3,5 @@ export interface CopilotApplication {
     notes?: string,
     createdAt: Date,
     opportunityId: string,
+    userId: number,
 }
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
index 9ea38afc8..4a0b50d98 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
-import { FC, useContext, useEffect, useMemo, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useContext, useEffect, useMemo, useState } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { mutate } from 'swr'
 import moment from 'moment'
 
@@ -10,6 +11,7 @@ import {
     IconOutline,
     LoadingSpinner,
     PageTitle,
+    TabsNavbar,
 } from '~/libs/ui'
 import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
 
@@ -20,9 +22,18 @@ import {
     useCopilotApplications,
     useCopilotOpportunity,
 } from '../../services/copilot-opportunities'
+import { FormattedMembers, useMembers } from '../../services/members'
 import { copilotRoutesMap } from '../../copilots.routes'
 
 import { ApplyOpportunityModal } from './apply-opportunity-modal'
+import {
+    CopilotDetailsTabViews,
+    getCopilotDetailsTabsConfig,
+    getHashFromTabId,
+    getTabIdFromHash,
+} from './tabs/config/copilot-details-tabs-config'
+import { OpportunityDetails } from './tabs/opportunity-details'
+import { CopilotApplications } from './tabs/copilot-applications'
 import styles from './styles.module.scss'
 
 const CopilotOpportunityDetails: FC<{}> = () => {
@@ -35,7 +46,14 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         () => !!profile?.roles?.some(role => role === UserRole.copilot),
         [profile],
     )
+    const isAdminOrPM: boolean = useMemo(
+        () => !!profile?.roles?.some(role => role === UserRole.administrator || role === UserRole.projectManager),
+        [profile],
+    )
     const { data: copilotApplications }: { data?: CopilotApplication[] } = useCopilotApplications(opportunityId)
+    const { data: members }: { data?: FormattedMembers[]} = useMembers(
+        copilotApplications ? copilotApplications?.map(item => item.userId) : [],
+    )
 
     if (!opportunityId) {
         navigate(copilotRoutesMap.CopilotOpportunityList)
@@ -43,6 +61,21 @@ const CopilotOpportunityDetails: FC<{}> = () => {
 
     const { data: opportunity, isValidating }: CopilotOpportunityResponse = useCopilotOpportunity(opportunityId)
 
+    const { hash }: { hash: string } = useLocation()
+
+    const activeTabHash: string = useMemo<string>(() => getTabIdFromHash(hash), [hash])
+
+    const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>] = useState<string>(activeTabHash)
+
+    useEffect(() => {
+        setActiveTab(activeTabHash)
+    }, [activeTabHash])
+
+    function handleTabChange(tabId: string): void {
+        setActiveTab(tabId)
+        window.location.hash = getHashFromTabId(tabId)
+    }
+
     useEffect(() => {
         const timer = setTimeout(() => {
             if (!opportunity) {
@@ -147,29 +180,19 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                     </div>
                 </div>
             </div>
-            <div className={styles.content}>
-                <div>
-                    <h2 className={styles.subHeading}> Required skills </h2>
-                    <div className={styles.skillsContainer}>
-                        {opportunity?.skills.map((skill: any) => (
-                            <div key={skill.id} className={styles.skillPill}>
-                                {skill.name}
-                            </div>
-                        ))}
-                    </div>
-                    <h2 className={styles.subHeading}> Description </h2>
-                    <p>
-                        {opportunity?.overview}
-                    </p>
-                </div>
-                <div>
-                    <h2 className={styles.subHeading}> Complexity </h2>
-                    <span className={styles.textCaps}>{opportunity?.complexity}</span>
+            <TabsNavbar
+                defaultActive={activeTab}
+                onChange={handleTabChange}
+                tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+            />
+            {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
+            {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && (
+                <CopilotApplications
+                    copilotApplications={copilotApplications}
+                    members={members}
+                />
+            )}
 
-                    <h2 className={styles.subHeading}> Requires Communication </h2>
-                    <span className={styles.textCaps}>{opportunity?.requiresCommunication}</span>
-                </div>
-            </div>
             {
                 showApplyOpportunityModal
                 && opportunity && (
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss b/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
index a51bd31bc..9b28a7018 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss
@@ -13,40 +13,6 @@
     color: $teal-100;
 }
 
-.subHeading {
-    margin-top: $sp-8;
-}
-
-.content {
-    margin-top: $sp-6;
-    display: flex;
-    flex-direction: row;
-    gap: 100px;
-}
-
-.content > div:first-child {
-    flex: 3;
-}
-
-.content > div:last-child {
-    flex: 1;
-}
-
-.skillsContainer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: $sp-2;
-}
-
-.skillPill {
-    background-color: $teal-100;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 10px;
-    white-space: nowrap;
-    font-size: 14px;
-}
 
 .infoRow {
     display: flex;
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts
new file mode 100644
index 000000000..a5ece28c9
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/config/copilot-details-tabs-config.ts
@@ -0,0 +1,55 @@
+import { TabsNavItem } from '~/libs/ui'
+
+export enum CopilotDetailsTabViews {
+    details = '0',
+    applications = '1',
+}
+
+export const getCopilotDetailsTabsConfig = (isAdminOrPM: boolean): TabsNavItem[] => (isAdminOrPM ? [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+    {
+        id: CopilotDetailsTabViews.applications,
+        title: 'Applications',
+    },
+] : [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+])
+
+export const CopilotDetailsTabsConfig: TabsNavItem[] = [
+    {
+        id: CopilotDetailsTabViews.details,
+        title: 'Details',
+    },
+    {
+        id: CopilotDetailsTabViews.applications,
+        title: 'Applications',
+    },
+]
+
+export function getHashFromTabId(tabId: string): string {
+    switch (tabId) {
+        case CopilotDetailsTabViews.details:
+            return '#details'
+        case CopilotDetailsTabViews.applications:
+            return '#applications'
+        default:
+            return '#details'
+    }
+}
+
+export function getTabIdFromHash(hash: string): string {
+    switch (hash) {
+        case '#details':
+            return CopilotDetailsTabViews.details
+        case '#applications':
+            return CopilotDetailsTabViews.applications
+        default:
+            return CopilotDetailsTabViews.details
+    }
+}
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
new file mode 100644
index 000000000..fa3b437d1
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
@@ -0,0 +1,71 @@
+import { FC, useMemo } from 'react'
+
+import { Table, TableColumn } from '~/libs/ui'
+
+import { CopilotApplication } from '../../../../models/CopilotApplication'
+import { FormattedMembers } from '../../../../services/members'
+
+import styles from './styles.module.scss'
+
+const tableColumns: TableColumn<CopilotApplication>[] = [
+    {
+        label: 'Topcoder Handle',
+        propertyName: 'handle',
+        type: 'text',
+    },
+    {
+        label: 'Fulfillment Rating',
+        propertyName: 'fulfilment',
+        type: 'text',
+    },
+    {
+        label: 'Active Projects',
+        propertyName: 'activeProjects',
+        type: 'text',
+    },
+    {
+        label: 'Applied Date',
+        propertyName: 'createdAt',
+        type: 'date',
+    },
+    {
+        label: 'Notes',
+        propertyName: 'notes',
+        renderer: (copilotApplication: CopilotApplication) => (
+            <div className={styles.title}>
+                {copilotApplication.notes}
+            </div>
+        ),
+        type: 'element',
+    },
+]
+
+const CopilotApplications: FC<{
+    copilotApplications?: CopilotApplication[]
+    members?: FormattedMembers[]
+}> = props => {
+    const getData = (): CopilotApplication[] => (props.copilotApplications ? props.copilotApplications.map(item => {
+        const member = props.members && props.members.find(each => each.userId === item.userId)
+        return {
+            ...item,
+            activeProjects: member?.activeProjects,
+            fulfilment: member?.copilotFulfillment,
+            handle: member?.handle,
+        }
+    })
+        .sort((a, b) => (b.fulfilment || 0) - (a.fulfilment || 0)) : [])
+
+    const tableData = useMemo(getData, [props.copilotApplications, props.members])
+
+    return (
+        <div>
+            <Table
+                columns={tableColumns}
+                data={tableData}
+                disableSorting
+            />
+        </div>
+    )
+}
+
+export default CopilotApplications
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/index.ts b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/index.ts
new file mode 100644
index 000000000..1c2945ec9
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/index.ts
@@ -0,0 +1 @@
+export { default as CopilotApplications } from './CopilotApplications'
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/styles.module.scss b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/styles.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
new file mode 100644
index 000000000..847dbc6c9
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/OpportunityDetails.tsx
@@ -0,0 +1,35 @@
+import { FC } from 'react'
+
+import { CopilotOpportunity } from '../../../../models/CopilotOpportunity'
+
+import styles from './styles.module.scss'
+
+const OpportunityDetails: FC<{
+    opportunity?: CopilotOpportunity
+}> = props => (
+    <div className={styles.content}>
+        <div>
+            <h2 className={styles.subHeading}> Required skills </h2>
+            <div className={styles.skillsContainer}>
+                {props.opportunity?.skills.map((skill: any) => (
+                    <div key={skill.id} className={styles.skillPill}>
+                        {skill.name}
+                    </div>
+                ))}
+            </div>
+            <h2 className={styles.subHeading}> Description </h2>
+            <p>
+                {props.opportunity?.overview}
+            </p>
+        </div>
+        <div>
+            <h2 className={styles.subHeading}> Complexity </h2>
+            <span className={styles.textCaps}>{props.opportunity?.complexity}</span>
+
+            <h2 className={styles.subHeading}> Requires Communication </h2>
+            <span className={styles.textCaps}>{props.opportunity?.requiresCommunication}</span>
+        </div>
+    </div>
+)
+
+export default OpportunityDetails
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/index.ts b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/index.ts
new file mode 100644
index 000000000..d4a80895f
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/index.ts
@@ -0,0 +1 @@
+export { default as OpportunityDetails } from './OpportunityDetails'
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/styles.module.scss b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/styles.module.scss
new file mode 100644
index 000000000..8debc451e
--- /dev/null
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/opportunity-details/styles.module.scss
@@ -0,0 +1,36 @@
+@import '@libs/ui/styles/includes';
+
+.subHeading {
+    margin-top: $sp-8;
+}
+
+.content {
+    margin-top: $sp-6;
+    display: flex;
+    flex-direction: row;
+    gap: 100px;
+}
+
+.content > div:first-child {
+    flex: 3;
+}
+
+.content > div:last-child {
+    flex: 1;
+}
+
+.skillsContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: $sp-2;
+}
+
+.skillPill {
+    background-color: $teal-100;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 10px;
+    white-space: nowrap;
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/apps/copilots/src/services/members.ts b/src/apps/copilots/src/services/members.ts
new file mode 100644
index 000000000..6926bd805
--- /dev/null
+++ b/src/apps/copilots/src/services/members.ts
@@ -0,0 +1,70 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+
+interface Member {
+    firstName: string,
+    lastName: string,
+    handle: string,
+    userId: number,
+    stats: {
+        COPILOT: {
+            activeProjects: number,
+            fulfillment: number,
+        }
+    }[]
+}
+
+export interface FormattedMembers extends Member {
+    copilotFulfillment: number,
+    activeProjects: number,
+}
+
+export type MembersResponse = SWRResponse<FormattedMembers[], FormattedMembers[]>
+
+/**
+ * Gets a list of members given a list of user ids.
+ * @param userIds User Ids.
+ */
+export const getMembersByUserIds = async (
+    userIds: string[],
+): Promise<Array<{ userId: string }>> => {
+    let qs = ''
+    userIds.forEach(userId => {
+        qs += `&userIds[]=${userId.toLowerCase()}`
+    })
+
+    return xhrGetAsync<Array<{ userId: string }>>(
+        `${EnvironmentConfig.API.V5}/members?${qs}`,
+    )
+}
+
+const membersFactory = (members: Member[]): FormattedMembers[] => members.map(member => ({
+    ...member,
+    activeProjects: member.stats.find(item => item.COPILOT.activeProjects)?.COPILOT.activeProjects || 0,
+    copilotFulfillment: member.stats.find(item => item.COPILOT.fulfillment)?.COPILOT.fulfillment || 0,
+}))
+
+/**
+ * Custom hook to fetch members by list of user ids
+ *
+ * @param {string} userIds - List of user ids
+ * @returns {MembersResponse} - The response containing the list of members data
+ */
+export const useMembers = (userIds: number[]): MembersResponse => {
+    let qs = ''
+    userIds.forEach(userId => {
+        qs += `&userIds[]=${userId}`
+    })
+    const url = `${EnvironmentConfig.API.V5}/members?${qs}`
+
+    const fetcher = (urlp: string): Promise<FormattedMembers[]> => xhrGetAsync<FormattedMembers[]>(urlp)
+        .then(data => membersFactory(data))
+        .catch(() => [])
+
+    return useSWR(url, fetcher, {
+        refreshInterval: 0,
+        revalidateOnFocus: false,
+    })
+}

From 557e54603ee959ad60970a957130dc6229d6c0aa Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 7 May 2025 16:47:56 +0200
Subject: [PATCH 2/5] fix: review comments

---
 .../copilots/src/models/CopilotApplication.ts |  1 +
 .../copilot-opportunity-details/index.tsx     | 22 ++++++++-------
 .../CopilotApplications.tsx                   | 27 +++++++++++++------
 src/libs/ui/lib/components/table/Table.tsx    |  2 ++
 .../components/table/table-row/TableRow.tsx   |  5 +++-
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/apps/copilots/src/models/CopilotApplication.ts b/src/apps/copilots/src/models/CopilotApplication.ts
index d3c85daa9..0c2c18aab 100644
--- a/src/apps/copilots/src/models/CopilotApplication.ts
+++ b/src/apps/copilots/src/models/CopilotApplication.ts
@@ -3,5 +3,6 @@ export interface CopilotApplication {
     notes?: string,
     createdAt: Date,
     opportunityId: string,
+    handle?: string,
     userId: number,
 }
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
index 4a0b50d98..f7439e3ed 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable complexity */
-import { Dispatch, FC, SetStateAction, useContext, useEffect, useMemo, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { mutate } from 'swr'
 import moment from 'moment'
@@ -41,7 +41,7 @@ const CopilotOpportunityDetails: FC<{}> = () => {
     const navigate = useNavigate()
     const [showNotFound, setShowNotFound] = useState(false)
     const [showApplyOpportunityModal, setShowApplyOpportunityModal] = useState(false)
-    const { profile }: ProfileContextData = useContext(profileContext)
+    const { profile, initialized }: ProfileContextData = useContext(profileContext)
     const isCopilot: boolean = useMemo(
         () => !!profile?.roles?.some(role => role === UserRole.copilot),
         [profile],
@@ -71,10 +71,10 @@ const CopilotOpportunityDetails: FC<{}> = () => {
         setActiveTab(activeTabHash)
     }, [activeTabHash])
 
-    function handleTabChange(tabId: string): void {
+    const handleTabChange = useCallback((tabId: string): void => {
         setActiveTab(tabId)
         window.location.hash = getHashFromTabId(tabId)
-    }
+    }, [getHashFromTabId, setActiveTab])
 
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -180,11 +180,15 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                     </div>
                 </div>
             </div>
-            <TabsNavbar
-                defaultActive={activeTab}
-                onChange={handleTabChange}
-                tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
-            />
+            {
+                initialized && (
+                    <TabsNavbar
+                        defaultActive={activeTab}
+                        onChange={handleTabChange}
+                        tabs={getCopilotDetailsTabsConfig(isAdminOrPM)}
+                    />
+                )
+            }
             {activeTab === CopilotDetailsTabViews.details && <OpportunityDetails opportunity={opportunity} />}
             {activeTab === CopilotDetailsTabViews.applications && isAdminOrPM && (
                 <CopilotApplications
diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
index fa3b437d1..9710b96b8 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
@@ -6,12 +6,17 @@ import { CopilotApplication } from '../../../../models/CopilotApplication'
 import { FormattedMembers } from '../../../../services/members'
 
 import styles from './styles.module.scss'
+import { Link } from 'react-router-dom'
+import { USER_PROFILE_URL } from '~/config/environments/default.env'
 
 const tableColumns: TableColumn<CopilotApplication>[] = [
     {
         label: 'Topcoder Handle',
         propertyName: 'handle',
-        type: 'text',
+        renderer: (copilotApplication: CopilotApplication) => (
+            <a href={`${USER_PROFILE_URL}/${copilotApplication.handle}`} target="_blank">{copilotApplication.handle}</a>
+        ),
+        type: 'element',
     },
     {
         label: 'Fulfillment Rating',
@@ -48,8 +53,8 @@ const CopilotApplications: FC<{
         const member = props.members && props.members.find(each => each.userId === item.userId)
         return {
             ...item,
-            activeProjects: member?.activeProjects,
-            fulfilment: member?.copilotFulfillment,
+            activeProjects: member?.activeProjects || 0,
+            fulfilment: member?.copilotFulfillment || 0,
             handle: member?.handle,
         }
     })
@@ -59,11 +64,17 @@ const CopilotApplications: FC<{
 
     return (
         <div>
-            <Table
-                columns={tableColumns}
-                data={tableData}
-                disableSorting
-            />
+            {
+                tableData.length > 0 && (
+                    <Table
+                        columns={tableColumns}
+                        data={tableData}
+                        disableSorting
+                        removeDefaultSort
+                        preventDefault
+                    />
+                )
+            }
         </div>
     )
 }
diff --git a/src/libs/ui/lib/components/table/Table.tsx b/src/libs/ui/lib/components/table/Table.tsx
index af302b8b1..7bdc00170 100644
--- a/src/libs/ui/lib/components/table/Table.tsx
+++ b/src/libs/ui/lib/components/table/Table.tsx
@@ -30,6 +30,7 @@ interface TableProps<T> {
     readonly onRowClick?: (data: T) => void
     readonly onToggleSort?: (sort: Sort) => void
     readonly removeDefaultSort?: boolean
+    readonly preventDefault?: boolean
 }
 
 interface DefaultSortDirectionMap {
@@ -180,6 +181,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                     columns={props.columns}
                     index={index}
                     showExpand={props.showExpand}
+                    preventDefault={props.preventDefault}
                 />
             ))
 
diff --git a/src/libs/ui/lib/components/table/table-row/TableRow.tsx b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
index 60fd3be33..9f9bb6bbf 100644
--- a/src/libs/ui/lib/components/table/table-row/TableRow.tsx
+++ b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
@@ -21,6 +21,7 @@ interface Props<T> {
     readonly columns: ReadonlyArray<TableColumn<T>>
     index: number
     readonly showExpand?: boolean
+    readonly preventDefault?: boolean
 }
 
 export const TableRow: <T extends { [propertyName: string]: any }>(
@@ -75,7 +76,9 @@ export const TableRow: <T extends { [propertyName: string]: any }>(
                 onClick={function onRowClick(
                     event: MouseEvent<HTMLTableRowElement>,
                 ): void {
-                    event.preventDefault()
+                    if (!props.preventDefault) {
+                        event.preventDefault()
+                    }
                     props.onRowClick?.(props.data)
                 }}
             >

From 6acbb53df55afeeeb1b0f919e258547ab6932e25 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 7 May 2025 16:56:53 +0200
Subject: [PATCH 3/5] fix: review comments

---
 .../tabs/copilot-applications/CopilotApplications.tsx | 11 ++++++++---
 .../ui/lib/components/table/table-row/TableRow.tsx    |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
index 9710b96b8..283debb48 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/tabs/copilot-applications/CopilotApplications.tsx
@@ -1,20 +1,25 @@
 import { FC, useMemo } from 'react'
 
 import { Table, TableColumn } from '~/libs/ui'
+import { USER_PROFILE_URL } from '~/config/environments/default.env'
 
 import { CopilotApplication } from '../../../../models/CopilotApplication'
 import { FormattedMembers } from '../../../../services/members'
 
 import styles from './styles.module.scss'
-import { Link } from 'react-router-dom'
-import { USER_PROFILE_URL } from '~/config/environments/default.env'
 
 const tableColumns: TableColumn<CopilotApplication>[] = [
     {
         label: 'Topcoder Handle',
         propertyName: 'handle',
         renderer: (copilotApplication: CopilotApplication) => (
-            <a href={`${USER_PROFILE_URL}/${copilotApplication.handle}`} target="_blank">{copilotApplication.handle}</a>
+            <a
+                href={`${USER_PROFILE_URL}/${copilotApplication.handle}`}
+                target='_blank'
+                rel='noreferrer'
+            >
+                {copilotApplication.handle}
+            </a>
         ),
         type: 'element',
     },
diff --git a/src/libs/ui/lib/components/table/table-row/TableRow.tsx b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
index 9f9bb6bbf..a038dfd51 100644
--- a/src/libs/ui/lib/components/table/table-row/TableRow.tsx
+++ b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
@@ -79,6 +79,7 @@ export const TableRow: <T extends { [propertyName: string]: any }>(
                     if (!props.preventDefault) {
                         event.preventDefault()
                     }
+
                     props.onRowClick?.(props.data)
                 }}
             >

From ca7c666c19a83ee822b6a85daef719a998073477 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 7 May 2025 17:37:51 +0200
Subject: [PATCH 4/5] fix: lint

---
 .../copilots/src/pages/copilot-opportunity-details/index.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
index 09949487d..21b4c8807 100644
--- a/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
+++ b/src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
+/* eslint-disable complexity */
 import {
     Dispatch,
     FC,

From cf19762f5ef9f185ed3459b47e9507e63d477a80 Mon Sep 17 00:00:00 2001
From: Hentry Martin <hentrymartin.p@gmail.com>
Date: Wed, 7 May 2025 17:40:57 +0200
Subject: [PATCH 5/5] removed circle config

---
 .circleci/config.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d12ec73ae..933f28cfa 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -221,7 +221,6 @@ workflows:
                               - dev
                               - LVT-256
                               - CORE-635
-                              - pm-578
 
             - deployQa:
                   context: org-global