Merge pull request #1018 from topcoder-platform/PM-589

PM-590 Copilot opportunity details page

Author: himaniraghav3

src/apps/copilots/src/copilots.routes.tsx

@@ -5,6 +5,9 @@ const CopilotsApp: LazyLoadedComponent = lazyLoad(() => import('./CopilotsApp'))
 const CopilotOpportunityList: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-opportunity-list/index'))
 const CopilotsRequests: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-requests/index'))
 const CopilotsRequestForm: LazyLoadedComponent = lazyLoad(() => import('./pages/copilot-request-form/index'))
+const CopilotOpportunityDetails: LazyLoadedComponent = lazyLoad(
+    () => import('./pages/copilot-opportunity-details/index'),
+)
 
 export const rootRoute: string = (
     EnvironmentConfig.SUBDOMAIN === AppSubdomain.copilots ? '' : `/${AppSubdomain.copilots}`
@@ -34,6 +37,11 @@ export const childRoutes = [
         id: 'CopilotRequestDetails',
         route: '/requests/:requestId',
     },
+    {
+        element: <CopilotOpportunityDetails />,
+        id: 'CopilotOpportunityDetails',
+        route: '/opportunity/:opportunityId',
+    },
 ] as const
 
 type RouteMap = {

src/apps/copilots/src/pages/copilot-opportunity-details/index.tsx

@@ -0,0 +1,127 @@
+import { FC, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import {
+    ContentLayout,
+    IconOutline,
+    LoadingSpinner,
+    PageTitle,
+} from '~/libs/ui'
+
+import { CopilotOpportunityResponse, useCopilotOpportunity } from '../../services/copilot-opportunities'
+import { copilotRoutesMap } from '../../copilots.routes'
+
+import styles from './styles.module.scss'
+
+const CopilotOpportunityDetails: FC<{}> = () => {
+    const { opportunityId }: {opportunityId?: string} = useParams<{ opportunityId?: string }>()
+    const navigate = useNavigate()
+    const [showNotFound, setShowNotFound] = useState(false)
+
+    if (!opportunityId) {
+        navigate(copilotRoutesMap.CopilotOpportunityList)
+    }
+
+    const { data: opportunity, isValidating }: CopilotOpportunityResponse = useCopilotOpportunity(opportunityId)
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!opportunity) {
+                setShowNotFound(true)
+            }
+        }, 2000)
+
+        return () => clearTimeout(timer) // Cleanup on unmount
+    }, [opportunity])
+
+    if (!opportunity && showNotFound) {
+        return (
+            <ContentLayout title='Copilot Opportunity Details'>
+                <PageTitle>Opportunity Not Found</PageTitle>
+                <p>The requested opportunity does not exist.</p>
+            </ContentLayout>
+        )
+    }
+
+    return (
+        <ContentLayout title='Copilot Opportunity'>
+            <PageTitle>Copilot Opportunity</PageTitle>
+            {isValidating && !showNotFound && (
+                <LoadingSpinner />
+            ) }
+            <h1 className={styles.header}>
+                {opportunity?.projectName}
+            </h1>
+            <div className={styles.infoRow}>
+                <div className={styles.infoColumn}>
+                    <IconOutline.ClipboardCheckIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Status</span>
+                        <span className={styles.infoValue}>{opportunity?.status}</span>
+                    </div>
+                </div>
+                <div className={styles.infoColumn}>
+                    <IconOutline.CalendarIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Duration</span>
+                        <span className={styles.infoValue}>
+                            {opportunity?.numWeeks}
+                            {' '}
+                            weeks
+                        </span>
+                    </div>
+                </div>
+                <div className={styles.infoColumn}>
+                    <IconOutline.ClockIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Hours</span>
+                        <span className={styles.infoValue}>
+                            {opportunity?.numHoursPerWeek}
+                            {' '}
+                            hours/week
+                        </span>
+                    </div>
+                </div>
+                <div className={styles.infoColumn}>
+                    <IconOutline.CogIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Type</span>
+                        <span className={styles.infoValue}>{opportunity?.type}</span>
+                    </div>
+                </div>
+                <div className={styles.infoColumn}>
+                    <IconOutline.GlobeAltIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Working Hours</span>
+                        <span className={styles.infoValue}>{opportunity?.tzRestrictions}</span>
+                    </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>
+
+                    <h2 className={styles.subHeading}> Requires Communication </h2>
+                    <span className={styles.textCaps}>{opportunity?.requiresCommunication}</span>
+                </div>
+            </div>
+        </ContentLayout>
+    )
+}
+
+export default CopilotOpportunityDetails

src/apps/copilots/src/pages/copilot-opportunity-details/styles.module.scss

@@ -0,0 +1,93 @@
+@import '@libs/ui/styles/includes';
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    font-family: $font-barlow-condensed;
+    font-size: 50px;
+    font-weight: $font-weight-medium;
+    margin-top: $sp-2;
+    padding: $sp-6 0;
+    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;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin: 16px 80px;
+    padding: 12px 0;
+}
+
+.infoText {
+    display: flex;
+    flex-direction: column;
+}
+
+.infoHeading {
+    font-size: 14px;
+    color: #666;
+}
+
+.infoValue {
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: capitalize;
+    color: #333;
+}
+
+.infoColumn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 120px;
+}
+
+.icon {
+    width: 30px;
+    height: 30px;
+    color: $teal-100;
+}
+
+.textCaps {
+    text-transform: capitalize;
+}

src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import {
@@ -10,6 +11,7 @@ import {
 } from '~/libs/ui'
 
 import { CopilotOpportunity } from '../../models/CopilotOpportunity'
+import { copilotRoutesMap } from '../../copilots.routes'
 import { CopilotOpportunitiesResponse, useCopilotOpportunities } from '../../services/copilot-opportunities'
 
 import styles from './styles.module.scss'
@@ -72,6 +74,7 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
 ]
 
 const CopilotOpportunityList: FC<{}> = () => {
+    const navigate = useNavigate()
 
     const {
         data: opportunities, isValidating, size, setSize,
@@ -83,6 +86,10 @@ const CopilotOpportunityList: FC<{}> = () => {
         setSize(size + 1)
     }
 
+    function handleRowClick(opportunity: CopilotOpportunity): void {
+        navigate(copilotRoutesMap.CopilotOpportunityDetails.replace(':opportunityId', `${opportunity.id}`))
+    }
+
     const opportunitiesLoading = isValidating
 
     return (
@@ -95,6 +102,7 @@ const CopilotOpportunityList: FC<{}> = () => {
                 data={tableData}
                 moreToLoad={isValidating || opportunities.length > 0}
                 onLoadMoreClick={loadMore}
+                onRowClick={handleRowClick}
             />
             {opportunitiesLoading && (
                 <LoadingSpinner overlay />

src/apps/copilots/src/services/copilot-opportunities.ts

@@ -1,7 +1,9 @@
+import useSWR, { SWRResponse } from 'swr'
 import useSWRInfinite, { SWRInfiniteResponse } from 'swr/infinite'
 
 import { EnvironmentConfig } from '~/config'
 import { xhrGetAsync } from '~/libs/core'
+import { buildUrl } from '~/libs/shared/lib/utils/url'
 
 import { CopilotOpportunity } from '../models/CopilotOpportunity'
 
@@ -59,3 +61,23 @@ export const useCopilotOpportunities = (): CopilotOpportunitiesResponse => {
 
     return { data: opportunities, isValidating, setSize: (s: number) => { setSize(s) }, size }
 }
+
+export type CopilotOpportunityResponse = SWRResponse<CopilotOpportunity, CopilotOpportunity>
+
+/**
+ * Custom hook to fetch copilot opportunity by id.
+ *
+ * @param {string} opportunityId - The unique identifier of the copilot request.
+ * @returns {CopilotOpportunityResponse} - The response containing the copilot request data.
+ */
+export const useCopilotOpportunity = (opportunityId?: string): CopilotOpportunityResponse => {
+    const url = opportunityId ? buildUrl(`${baseUrl}/copilots/opportunities/${opportunityId}`) : undefined
+
+    const fetcher = (urlp: string): Promise<CopilotOpportunity> => xhrGetAsync<CopilotOpportunity>(urlp)
+        .then(copilotOpportunityFactory)
+
+    return useSWR(url, fetcher, {
+        refreshInterval: 0,
+        revalidateOnFocus: false,
+    })
+}