Feature/eap listing page

app/src/App/routes/index.tsx

@@ -1181,6 +1181,51 @@ const fieldReportDetails = customWrapRoute({
     },
 });
 
+type DefaultEapRegistrationChild = 'new';
+const eapRegistrationLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration',
+    forwardPath: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Process',
+        visibility: 'is-authenticated',
+    },
+});
+
+const newEapDevelopmentRegistration = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'New EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapDevelopmentRegistrationForm = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: ':eapId/',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1233,21 +1278,6 @@ const newPerOverviewForm = customWrapRoute({
     },
 });
 
-const eapDevelopmentRegistration = customWrapRoute({
-    parent: rootLayout,
-    path: 'eap-registration/new',
-    component: {
-        render: () => import('#views/EapRegistration'),
-        props: {},
-    },
-    wrapperComponent: Auth,
-    context: {
-        title: 'EAP Development Registration',
-        visibility: 'is-authenticated',
-        permissions: ({ isGuestUser }) => !isGuestUser,
-    },
-});
-
 const perOverviewForm = customWrapRoute({
     parent: perProcessLayout,
     path: ':perId/overview',
@@ -1456,7 +1486,7 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
-    eapDevelopmentRegistration,
+    newEapDevelopmentRegistration,
     eapFullForm,
     simplifiedEapForm,
     ...regionRoutes,
@@ -1472,6 +1502,8 @@ const wrappedRoutes = {
     drefDetail,
     eapDetail,
     drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

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/EapTableActions/i18n.json

@@ -0,0 +1,9 @@
+{
+    "namespace":"accountMyFormsEap",
+    "strings":{
+        "eapViewLabel": "View",
+        "eapEditLabel": "Edit",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}

app/src/views/EapApplications/EapTableActions/index.tsx

@@ -0,0 +1,59 @@
+import { TableActions } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+
+export interface Props {
+    eapId: number;
+}
+
+function EapTableActions(props: Props) {
+    const { eapId } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <TableActions
+            extraActions={(
+                <>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'view' }}
+                    >
+                        {strings.eapViewLabel}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'edit' }}
+                    >
+                        {strings.eapEditLabel}
+                    </DropdownMenuItem>
+                </>
+            )}
+        >
+            <Link
+                to="eapFullForm"
+                urlParams={{ eapId }}
+                variant="secondary"
+            >
+                {strings.eapFormLink}
+            </Link>
+            <Link
+                to="simplifiedEapForm"
+                urlParams={{ eapId }}
+                variant="secondary"
+            >
+                {strings.simplifiedEapLink}
+            </Link>
+        </TableActions>
+    );
+}
+
+export default EapTableActions;

app/src/views/EapApplications/i18n.json

@@ -3,7 +3,10 @@
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
         "eapApplicationsHeading": "EAP Application",
-        "eapFormLink": "Start Full EAP",
-        "simplifiedEapLink": "Start sEAP"
+        "eapLastUpdated": "Last Updated",
+        "eapName": "Name/Phase",
+        "eapType": "EAP Type",
+        "eapStatus": "Status",
+        "eapRegistration": "EAP Registration"
     }
 }

app/src/views/EapApplications/index.tsx

@@ -5,11 +5,15 @@ import {
 } from 'react';
 import {
     Container,
+    type RowOptions,
     Table,
+    TableBodyContent,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     createDateColumn,
+    createElementColumn,
+    createEmptyColumn,
     createExpandColumn,
     createExpansionIndicatorColumn,
     createStringColumn,
@@ -18,11 +22,16 @@ 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,
 } from '#utils/restRequest';
 
+import EapTableActions, { type Props as EapTableActionProps } from './EapTableActions';
 import Filters, { type FilterValue } from './Filters';
 
 import i18n from './i18n.json';
@@ -37,6 +46,7 @@ type Key = EapListItem['id'];
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+
     const {
         filter,
         offset,
@@ -76,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}:
@@ -99,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 columns = useMemo(
-        () => ([
-            createExpansionIndicatorColumn<EapListItem, Key>(false),
-            ...baseColumns,
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
                 '',
@@ -126,7 +126,66 @@ export function Component() {
                 }),
             ),
         ]),
-        [baseColumns, handleExpandClick, expandedRow],
+        [
+            strings.eapLastUpdated,
+            strings.eapName,
+            strings.eapType,
+            strings.eapStatus,
+            expandedRow,
+            handleExpandClick,
+        ],
+    );
+
+    const detailColumns = useMemo(
+        () => ([
+            createExpansionIndicatorColumn<EapListItem, number>(true),
+            createStringColumn<EapListItem, number>(
+                'title',
+                '',
+                () => strings.eapRegistration,
+                { columnClassName: styles.detailTitle },
+            ),
+            createEmptyColumn(),
+            createElementColumn<EapListItem, number, EapTableActionProps>(
+                'actions',
+                '',
+                EapTableActions,
+                (eapId) => ({
+                    eapId,
+                }),
+            ),
+            createEmptyColumn(),
+        ]),
+        [strings.eapRegistration],
+    );
+
+    const rowModifier = useCallback(
+        ({ row, datum }: RowOptions<EapListItem, number>) => {
+            if (datum.id !== expandedRow?.id) {
+                return row;
+            }
+
+            const subRows = eapResponse?.results?.filter(
+                (subRow) => subRow.id === datum.id,
+            );
+
+            return (
+                <>
+                    {row}
+                    <TableBodyContent
+                        keySelector={numericIdSelector}
+                        data={subRows}
+                        columns={detailColumns}
+                        cellClassName={styles.subCell}
+                    />
+                </>
+            );
+        },
+        [
+            expandedRow,
+            detailColumns,
+            eapResponse,
+        ],
     );
 
     return (
@@ -141,35 +200,19 @@ export function Component() {
                 />
             )}
             actions={(
-                <>
-                    <Link
-                        to="home"
-                        variant="secondary"
-                    >
-                        {strings.eapRegistrationLink}
-                    </Link>
-                    {/* TODO: Move this to table action
-                    <Link
-                        to="eapFullForm"
-                        variant="secondary"
-                    >
-                        {strings.eapFormLink}
-                    </Link>
-                    <Link
-                        to="simplifiedEapForm"
-                        variant="secondary"
-                    >
-                        {strings.simplifiedEapLink}
-                    </Link>
-                    */}
-                </>
+                <Link
+                    to="newEapDevelopmentRegistration"
+                    variant="secondary"
+                >
+                    {strings.eapRegistrationLink}
+                </Link>
             )}
         >
-            {/* FIXME: Add eap registration link */}
             <Table
                 className={styles.table}
                 data={eapResponse?.results}
-                columns={columns}
+                columns={baseColumns}
+                rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapPending}
                 filtered={filtered}