Merge branch 'dev' into diazz-admin-f2f-30376659

Author: suppermancool

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

@@ -23,16 +23,19 @@ export const childRoutes = [
         route: '/',
     },
     {
+        authRequired: true,
         element: <CopilotsRequests />,
         id: 'CopilotRequests',
         route: '/requests',
     },
     {
+        authRequired: true,
         element: <CopilotsRequestForm />,
         id: 'CopilotRequestForm',
         route: '/requests/new',
     },
     {
+        authRequired: true,
         element: <CopilotsRequests />,
         id: 'CopilotRequestDetails',
         route: '/requests/:requestId',
@@ -54,10 +57,8 @@ export const copilotRoutesMap = childRoutes.reduce((allRoutes, route) => (
 
 export const copilotsRoutes: ReadonlyArray<PlatformRoute> = [
     {
-        authRequired: true,
         children: [
             ...childRoutes,
-
         ],
         domain: AppSubdomain.copilots,
         element: <CopilotsApp />,

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

@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import moment from 'moment'
 
 import {
     ContentLayout,
@@ -60,6 +61,17 @@ const CopilotOpportunityDetails: FC<{}> = () => {
                         <span className={styles.infoValue}>{opportunity?.status}</span>
                     </div>
                 </div>
+                <div className={styles.infoColumn}>
+                    <IconOutline.PlayIcon className={styles.icon} />
+                    <div className={styles.infoText}>
+                        <span className={styles.infoHeading}>Start Date</span>
+                        <span className={styles.infoValue}>
+                            {moment(opportunity?.startDate)
+                                .format('MMM D, YYYY')}
+
+                        </span>
+                    </div>
+                </div>
                 <div className={styles.infoColumn}>
                     <IconOutline.CalendarIcon className={styles.icon} />
                     <div className={styles.infoText}>

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

@@ -13,14 +13,20 @@ import {
 import { CopilotOpportunity } from '../../models/CopilotOpportunity'
 import { copilotRoutesMap } from '../../copilots.routes'
 import { CopilotOpportunitiesResponse, useCopilotOpportunities } from '../../services/copilot-opportunities'
+import { ProjectTypeLabels } from '../../constants'
 
 import styles from './styles.module.scss'
 
 const tableColumns: TableColumn<CopilotOpportunity>[] = [
     {
         label: 'Title',
         propertyName: 'projectName',
-        type: 'text',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div className={styles.title}>
+                {copilotOpportunity.projectName}
+            </div>
+        ),
+        type: 'element',
     },
     {
         label: 'Status',
@@ -33,23 +39,43 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         type: 'element',
     },
     {
+        isSortable: false,
         label: 'Skills Required',
         propertyName: 'skills',
-        renderer: (copilotOpportunity: CopilotOpportunity) => (
-            <div className={styles.skillsContainer}>
-                {copilotOpportunity.skills.map((skill: any) => (
-                    <div key={skill.id} className={styles.skillPill}>
-                        {skill.name}
-                    </div>
-                ))}
-            </div>
-        ),
+        renderer: (copilotOpportunity: CopilotOpportunity) => {
+            const visibleSkills = copilotOpportunity.skills.slice(0, 3)
+            const remainingSkills = copilotOpportunity.skills.slice(3)
+            return (
+                <div className={styles.skillsContainer}>
+                    {visibleSkills.map((skill: { id: string | number; name: string }) => (
+                        <div key={skill.id} className={styles.skillPill}>
+                            {skill.name}
+                        </div>
+                    ))}
+                    {remainingSkills.length > 0 && (
+                        <div
+                            className={styles.skillPill}
+                            title={remainingSkills.map(skill => skill.name)
+                                .join(', ')}
+                        >
+                            +
+                            {remainingSkills.length}
+                        </div>
+                    )}
+                </div>
+            )
+        },
         type: 'element',
     },
     {
         label: 'Type',
         propertyName: 'type',
-        type: 'text',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div className={styles.type}>
+                {ProjectTypeLabels[copilotOpportunity.projectType]}
+            </div>
+        ),
+        type: 'element',
     },
     {
         label: 'Starting Date',
@@ -62,7 +88,7 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         type: 'text',
     },
     {
-        label: 'Hours per week needed',
+        label: 'Hours/Week',
         propertyName: 'numHoursPerWeek',
         type: 'number',
     },
@@ -80,7 +106,10 @@ const CopilotOpportunityList: FC<{}> = () => {
         data: opportunities, isValidating, size, setSize,
     }: CopilotOpportunitiesResponse = useCopilotOpportunities()
 
-    const tableData = useMemo(() => opportunities, [opportunities])
+    const tableData = useMemo(() => opportunities.map(opportunity => ({
+        ...opportunity,
+        type: ProjectTypeLabels[opportunity.projectType] ?? '',
+    })), [opportunities])
 
     function loadMore(): void {
         setSize(size + 1)
@@ -103,6 +132,7 @@ const CopilotOpportunityList: FC<{}> = () => {
                 moreToLoad={isValidating || opportunities.length > 0}
                 onLoadMoreClick={loadMore}
                 onRowClick={handleRowClick}
+                removeDefaultSort
             />
             {opportunitiesLoading && (
                 <LoadingSpinner overlay />

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

@@ -3,16 +3,17 @@
 .skillsContainer {
     display: flex;
     flex-wrap: wrap;
+    overflow: auto;
     gap: 8px;
 }
 
 .skillPill {
-    background-color: #aaaaaa;
+    background-color: #d6d6d6;
     color: #333;
     padding: 4px 8px;
     border-radius: 10px;
-    white-space: nowrap;
-    font-size: 14px;
+    white-space: break-spaces;
+    font-size: 11px;
 }
 
 .status {
@@ -26,4 +27,8 @@
 
 .activeStatus {
     color: green;
-}
+}
+
+.type {
+    white-space: nowrap;
+}

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

@@ -71,7 +71,7 @@ export type CopilotOpportunityResponse = SWRResponse<CopilotOpportunity, Copilot
  * @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 url = opportunityId ? buildUrl(`${baseUrl}/copilot/opportunity/${opportunityId}`) : undefined
 
     const fetcher = (urlp: string): Promise<CopilotOpportunity> => xhrGetAsync<CopilotOpportunity>(urlp)
         .then(copilotOpportunityFactory)

src/libs/ui/lib/components/table/Table.tsx

@@ -102,6 +102,11 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
         function toggleSort(fieldName: string): void {
 
+            const col = props.columns.find(c => c.propertyName === fieldName)
+
+            // if sortable is false, we return
+            if (col?.isSortable === false) return
+
             // if we don't have anything to sort by, we shouldn't be here
             if (!sort && !props.removeDefaultSort) {
                 return
@@ -129,7 +134,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
         const headerRow: Array<JSX.Element> = displayColumns
             .map((col, index) => {
-                const isSortable: boolean = !!col.propertyName
+                const isSortable: boolean = !!col.propertyName && col.isSortable !== false
                 const isCurrentlySorted: boolean = isSortable && col.propertyName === sort?.fieldName
                 const colorClass: string = isCurrentlySorted ? 'black-100' : 'black-60'
                 const sortableClass: string | undefined = isSortable ? styles.sortable : undefined
@@ -151,7 +156,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                                     </Tooltip>
                                 </div>
                             )}
-                            {!props.disableSorting && (
+                            {!props.disableSorting && isSortable && (
                                 <TableSort
                                     iconClass={colorClass}
                                     isCurrentlySorted={isCurrentlySorted}

src/libs/ui/lib/components/table/table-column.model.ts

@@ -11,4 +11,5 @@ export interface TableColumn<T> {
     readonly isExpand?: boolean
     readonly colSpan?: number
     readonly type: TableCellType
+    readonly isSortable?: boolean
 }

src/libs/ui/lib/components/table/table-functions/table.functions.ts

@@ -53,11 +53,11 @@ export function getSorted<T extends { [propertyName: string]: any }>(
 
     if (sortColumn.type === 'date') {
         return sortedData
-            .sort((a: T, b: T) => sortNumbers(
-                (a[sort.fieldName] as Date).getTime(),
-                (b[sort.fieldName] as Date).getTime(),
-                sort.direction,
-            ))
+            .sort((a: T, b: T) => {
+                const aDate = new Date(a[sort.fieldName])
+                const bDate = new Date(b[sort.fieldName])
+                return sortNumbers(aDate.getTime(), bDate.getTime(), sort.direction)
+            })
     }
 
     return sortedData