feat: add dates and update cell text align

Author: dcoa

src/app/types.ts

@@ -21,10 +21,16 @@ export type CorporateCourse = {
   id: string;
   catalogId: number;
   position: number;
+  enrollments: number;
+  certified: number;
+  completionRate: number;
   courseRun: {
     id: string;
     displayName: string;
-  }
+    start: string | null;
+    end: string | null;
+    enrollmentStart: string | null;
+    enrollmentEnd: string | null;  }
 };
 
 export type CorporateCatalog = {

src/courses/components/CoursesList.tsx

@@ -31,9 +31,14 @@ const CoursesList = ({ partnerId, catalogId }: CoursesListProps) => {
     pageCount,
     isLoading,
   } = useCatalogCourses(partnerId, catalogId, pageIndex + 1, pageSize);
-  const positions = Array.from({ length: count + 1 || 0 }, (_, i) => i);
   const deleteCatalogCourse = useDeleteCatalogCourse();
 
+  const positions = Array.from({ length: count + 1 || 0 }, (_, i) => i);
+  const formatDate = (date: string | null) => {
+    if (!date) return '';
+    return intl.formatDate(date);
+  };
+
   const tableActions = [{
     type: 'view',
     action: (course) => navigate(paths.courseDetail.buildPath(partnerId, catalogId, course.courseRun.id)),
@@ -116,10 +121,28 @@ const CoursesList = ({ partnerId, catalogId }: CoursesListProps) => {
         {
           Header: intl.formatMessage(messages.headerCourseDates),
           accessor: 'courseDates',
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Cell: ({ row }: CoursesCell) => {
+            const { start, end } = row.original.courseRun;
+            return (
+              <>
+                {`${formatDate(start)} - ${formatDate(end)}`}
+              </>
+            )
+          }
         },
         {
           Header: intl.formatMessage(messages.headerEnrollmentDates),
           accessor: 'enrollmentDates',
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Cell: ({ row }: CoursesCell) => {
+            const { enrollmentStart, enrollmentEnd } = row.original.courseRun;
+            return (
+              <>
+                {`${formatDate(enrollmentStart)} - ${formatDate(enrollmentEnd)}`}
+              </>
+            )
+          }
         },
         {
           Header: intl.formatMessage(messages.headerEnrollment),
@@ -132,6 +155,11 @@ const CoursesList = ({ partnerId, catalogId }: CoursesListProps) => {
         {
           Header: intl.formatMessage(messages.headerCompletion),
           accessor: 'completionRate',
+          Cell: ({ row }: CoursesCell) => (
+            <>
+              {row.original.completionRate}%
+            </>
+          ),
         },
       ]}
     >

src/index.scss

@@ -3,4 +3,16 @@
 
 .course-name:hover {
     text-decoration: none !important;
+}
+
+button[aria-label="Copy description"] svg {
+    width: 16px;
+    height: 16px;
+}
+
+.pgn__data-table td{
+    text-align: center;
+}
+.pgn__data-table th:not(:first-of-type) span {
+    margin: auto;
 }