eap(lisitng): Add eap listing page

Author: barshathakuri

app/src/App/routes/index.tsx

@@ -1214,7 +1214,7 @@ const eapRegistrationFormIndex = customWrapRoute({
     },
 });
 
-const eapDevelopmentRegistration = customWrapRoute({
+const newEapDevelopmentRegistration = customWrapRoute({
     parent: eapRegistrationLayout,
     path: 'new' satisfies DefaultEapRegistrationChild,
     component: {
@@ -1503,7 +1503,7 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
-    eapDevelopmentRegistration,
+    newEapDevelopmentRegistration,
     eapFullForm,
     simplifiedEapForm,
     ...regionRoutes,

app/src/utils/constants.ts

@@ -195,3 +195,6 @@ export const multiMonthSelectDefaultValue = listToMap(
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;

app/src/views/EapApplications/i18n.json

@@ -2,6 +2,11 @@
     "namespace": "eapApplication",
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
-        "eapApplicationsHeading": "EAP Application"
+        "eapApplicationsHeading": "EAP Application",
+        "eapLastUpdated": "Last Updated",
+        "eapName": "Name/Phase",
+        "eapType": "EAP Type",
+        "eapStatus": "Status",
+        "eapRegistration": "EAP Registration"
     }
 }

app/src/views/EapApplications/index.tsx

@@ -22,6 +22,10 @@ import {
 
 import Link from '#components/Link';
 import useFilterState from '#hooks/useFilterState';
+import {
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
 import {
     type GoApiResponse,
     useRequest,
@@ -82,19 +86,18 @@ export function Component() {
         () => ([
             createDateColumn<EapListItem, number>(
                 'created_at',
-                'Last Updated',
+                strings.eapLastUpdated,
                 (item) => item.created_at,
-                { columnClassName: styles.date },
             ),
             createStringColumn<EapListItem, number>(
                 'name',
-                'Name/Phase',
+                strings.eapName,
                 (item) => {
                     const baseYear = new Date(item.created_at).getFullYear();
                     let addedYear = baseYear;
-                    if (item.eap_type === 10) {
-                        addedYear = baseYear + 4;
-                    } else if (item.eap_type === 20) {
+                    if (item.eap_type === EAP_TYPE_FULL) {
+                        addedYear = baseYear + 5;
+                    } else if (item.eap_type === EAP_TYPE_SIMPLIFIED) {
                         addedYear = baseYear + 2;
                     }
                     return `${item.country_details?.name}:
@@ -105,24 +108,15 @@ export function Component() {
             ),
             createStringColumn<EapListItem, number>(
                 'eap_type_display',
-                'EAP Type',
+                strings.eapType,
                 (item) => item.eap_type_display,
-                { columnClassName: styles.type },
             ),
             createStringColumn<EapListItem, number>(
                 'status_display',
-                'Status',
+                strings.eapStatus,
                 (item) => item.status_display,
                 { columnClassName: styles.status },
             ),
-        ]),
-        [],
-    );
-
-    const aggregatedColumns = useMemo(
-        () => ([
-            createExpansionIndicatorColumn<EapListItem, Key>(false),
-            ...baseColumns,
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
                 '',
@@ -132,7 +126,14 @@ export function Component() {
                 }),
             ),
         ]),
-        [baseColumns, handleExpandClick, expandedRow],
+        [
+            strings.eapLastUpdated,
+            strings.eapName,
+            strings.eapType,
+            strings.eapStatus,
+            expandedRow,
+            handleExpandClick,
+        ],
     );
 
     const detailColumns = useMemo(
@@ -141,22 +142,21 @@ export function Component() {
             createStringColumn<EapListItem, number>(
                 'title',
                 '',
-                () => 'EAP Registration',
+                () => strings.eapRegistration,
                 { columnClassName: styles.detailTitle },
             ),
+            createEmptyColumn(),
             createElementColumn<EapListItem, number, EapTableActionProps>(
                 'actions',
-                'EAP Registration',
+                '',
                 EapTableActions,
                 (eapId) => ({
                     eapId,
                 }),
             ),
             createEmptyColumn(),
-            createEmptyColumn(),
-            createEmptyColumn(),
         ]),
-        [],
+        [strings.eapRegistration],
     );
 
     const rowModifier = useCallback(
@@ -201,7 +201,7 @@ export function Component() {
             )}
             actions={(
                 <Link
-                    to="home"
+                    to="newEapDevelopmentRegistration"
                     variant="secondary"
                 >
                     {strings.eapRegistrationLink}
@@ -211,7 +211,7 @@ export function Component() {
             <Table
                 className={styles.table}
                 data={eapResponse?.results}
-                columns={aggregatedColumns}
+                columns={baseColumns}
                 rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapPending}

app/src/views/EapApplications/styles.module.css

@@ -1,12 +1,9 @@
 .eap-form-links {
     .table {
-        .type,
-        .status,
-        .date {
+        .status {
             width: 0%;
-            min-width: 7rem;
+            min-width: 19rem;
         }
-
         .sub-cell {
             border-bottom: unset;
             background-color: var(--go-ui-color-gray-20);

app/src/views/EapRegistration/i18n.json

@@ -42,6 +42,7 @@
         "eapRegistrationSuccess": "Successfully created a new EAP!",
         "eapNotSure": "Not Sure",
         "eapDevelopmentRegistrationHeading": "EAP Development Registration",
-        "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application."
+        "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application.",
+        "eapFailedToLoad": "Failed to Load"
     }
 }