From 262eab8c5545d0cc491ddad1096cc7d055abb6a2 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Tue, 11 Mar 2025 17:52:27 +0545
Subject: [PATCH 1/4] Add Update ERU Form

---
 app/src/App/routes/SurgeRoutes.tsx            |   3 +-
 .../EruReadinessForm/EruInputItem/i18n.json   |  11 +
 .../EruReadinessForm/EruInputItem/index.tsx   | 160 +++++++++
 .../EruInputItem/styles.module.css            |  13 +
 app/src/views/EruReadinessForm/i18n.json      |  16 +
 app/src/views/EruReadinessForm/index.tsx      | 315 ++++++++++++++++++
 app/src/views/EruReadinessForm/schema.ts      |  48 +++
 .../views/EruReadinessForm/styles.module.css  |  13 +
 .../EmergencyResponseUnit/index.tsx           |  11 +-
 9 files changed, 587 insertions(+), 3 deletions(-)
 create mode 100644 app/src/views/EruReadinessForm/EruInputItem/i18n.json
 create mode 100644 app/src/views/EruReadinessForm/EruInputItem/index.tsx
 create mode 100644 app/src/views/EruReadinessForm/EruInputItem/styles.module.css
 create mode 100644 app/src/views/EruReadinessForm/i18n.json
 create mode 100644 app/src/views/EruReadinessForm/index.tsx
 create mode 100644 app/src/views/EruReadinessForm/schema.ts
 create mode 100644 app/src/views/EruReadinessForm/styles.module.css

diff --git a/app/src/App/routes/SurgeRoutes.tsx b/app/src/App/routes/SurgeRoutes.tsx
index ae0cadec1..0af9f5e25 100644
--- a/app/src/App/routes/SurgeRoutes.tsx
+++ b/app/src/App/routes/SurgeRoutes.tsx
@@ -126,8 +126,7 @@ const updateERUReadinessForm = customWrapRoute({
     parent: rootLayout,
     path: 'update-eru-readiness',
     component: {
-        // TODO: Add ERUReadinessUpdateForm Route
-        render: () => import('#views/Home'),
+        render: () => import('#views/EruReadinessForm'),
         props: {},
     },
     wrapperComponent: Auth,
diff --git a/app/src/views/EruReadinessForm/EruInputItem/i18n.json b/app/src/views/EruReadinessForm/EruInputItem/i18n.json
new file mode 100644
index 000000000..661579b87
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "eruReadinessForm",
+    "strings": {
+        "eruEquipmentReadiness": "Equipment Readiness",
+        "eruPeopleReadiness": "People Readiness",
+        "eruFundingReadiness": "Funding Readiness",
+        "eruComments": "Comments",
+        "eruLead": "Confirm that you have capacity to lead this type of ERU",
+        "eruSupport": "Confirm that you have capacity to support this type of ERU"
+    }
+}
diff --git a/app/src/views/EruReadinessForm/EruInputItem/index.tsx b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
new file mode 100644
index 000000000..5c2510186
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
@@ -0,0 +1,160 @@
+import {
+    Checkbox,
+    Container,
+    InputSection,
+    RadioInput,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type PartialForm,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type EruType } from '../schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+
+type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
+
+function readinessKeySelector(option: ReadinessOption) {
+    return option.key;
+}
+
+function readinessLabelSelector(option: ReadinessOption) {
+    return option.value;
+}
+
+const defaultCollectionValue: PartialForm<EruType> = {
+    client_id: randomString(),
+};
+
+interface Props {
+    index: number;
+    value: PartialForm<EruType>;
+    onChange: (value: SetValueArg<PartialForm<EruType>>, index: number) => void;
+    title: Record<string, string> | undefined;
+    error: ArrayError<EruType> | undefined;
+}
+
+function EruInputItem(props: Props) {
+    const {
+        index,
+        value,
+        onChange,
+        title,
+        error: errorFromProps,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        deployments_eru_readiness_status,
+    } = useGlobalEnums();
+
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        defaultCollectionValue,
+    );
+    const eruTypeLabel = isDefined(value.type)
+        ? title?.[value.type]
+        : undefined;
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <Container
+            childrenContainerClassName={styles.eruTypes}
+            heading={eruTypeLabel}
+        >
+            <InputSection
+                className={styles.readinessOptions}
+                title={strings.eruEquipmentReadiness}
+            >
+                <RadioInput
+                    listContainerClassName={styles.readinessList}
+                    name="equipment_readiness"
+                    value={value.equipment_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.equipment_readiness}
+                />
+            </InputSection>
+            <InputSection
+                className={styles.readinessOptions}
+                title={strings.eruPeopleReadiness}
+            >
+                <RadioInput
+                    listContainerClassName={styles.readinessList}
+                    name="people_readiness"
+                    value={value.people_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.people_readiness}
+                />
+            </InputSection>
+            <InputSection
+                className={styles.readinessOptions}
+                title={strings.eruFundingReadiness}
+            >
+                <RadioInput
+                    listContainerClassName={styles.readinessList}
+                    name="funding_readiness"
+                    value={value.funding_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.funding_readiness}
+                />
+            </InputSection>
+            <InputSection
+                className={styles.readinessOptions}
+                title={strings.eruComments}
+            >
+                <TextArea
+                    name="comment"
+                    value={value?.comment}
+                    onChange={onFieldChange}
+                    error={error?.comment}
+                />
+                <Checkbox
+                    label={strings.eruLead}
+                    name="has_capacity_to_lead"
+                    value={value.has_capacity_to_lead}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_lead}
+                />
+                <Checkbox
+                    label={strings.eruSupport}
+                    name="has_capacity_to_support"
+                    value={value.has_capacity_to_support}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_support}
+                />
+            </InputSection>
+        </Container>
+
+    );
+}
+
+export default EruInputItem;
diff --git a/app/src/views/EruReadinessForm/EruInputItem/styles.module.css b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
new file mode 100644
index 000000000..1882a30d9
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
@@ -0,0 +1,13 @@
+.eru-types {
+    display: flex;
+
+    .readiness-options {
+        display: flex;
+        flex-direction: column;
+
+        .readiness-list {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
diff --git a/app/src/views/EruReadinessForm/i18n.json b/app/src/views/EruReadinessForm/i18n.json
new file mode 100644
index 000000000..f33d331b0
--- /dev/null
+++ b/app/src/views/EruReadinessForm/i18n.json
@@ -0,0 +1,16 @@
+{
+    "namespace": "eruReadinessForm",
+    "strings": {
+        "eruReadinessFormTitle": "Update ERU Readiness Form",
+        "eruReadinessFormHeading": "ERU Deployment Readiness",
+        "eruReadinessFormDescription": "Complete the form with the ERU Readiness data of your National Society. In case of any questions.",
+        "eruCancelButton": "Cancel",
+        "eruSaveAndCloseButton": "Save and Close",
+        "eruNationalSociety": "National Society",
+        "eruTypes": "Select ERU Type(s)",
+        "eruFormCreatedSuccessfully": "ERU Readiness Created Successfully",
+        "eruFormFailedToCreate": "Failed to create a ERU Readiness",
+        "eruFormSuccessfullyUpdated": "Successfully Updated ERU Readiness Form",
+        "eruFormFailedToUpdate": "Failed to Update ERU Readiness Form"
+    }
+}
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
new file mode 100644
index 000000000..5ed62426c
--- /dev/null
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -0,0 +1,315 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Button,
+    Container,
+    InputSection,
+    MultiSelectInput,
+    SelectInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    numericKeySelector,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    listToMap,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    type PartialForm,
+    useForm,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import Page from '#components/Page';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useAlertContext from '#hooks/useAlert';
+import {
+    type GoApiResponse,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import { transformObjectError } from '#utils/restRequest/error';
+
+import EruInputItem from './EruInputItem';
+import schema, {
+    type BaseFormType,
+    type EruReadinessBody,
+    type EruReadinessPostBody,
+} from './schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
+type EruOwnerOption = NonNullable<EruOwners['results']>[number];
+type EruTypeOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+
+function eruOwnerKeySelector(option: EruOwnerOption) {
+    return option.id;
+}
+function eruOwnerLabelSelector(option: EruOwnerOption) {
+    return option.national_society_country_details.society_name ?? '';
+}
+
+const defaultFormValues: PartialForm<EruReadinessBody> = {};
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    // const { eruId } = useParams<{ eruId: number }>();
+    // TODO: Use useParams for eruId
+    const eruId = 1;
+
+    const alert = useAlertContext();
+    const {
+        deployments_eru_type,
+    } = useGlobalEnums();
+
+    const {
+        value,
+        setFieldValue,
+        validate,
+        setError,
+        setValue,
+        error: formError,
+    } = useForm(
+        schema,
+        { value: defaultFormValues },
+    );
+
+    const error = getErrorObject(formError);
+
+    const {
+        pending: createEruReadinessPending,
+        trigger: createEruReadiness,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/',
+        method: 'POST',
+        body: (ctx: EruReadinessPostBody) => ctx,
+        onSuccess: () => {
+            alert.show(
+                strings.eruFormCreatedSuccessfully,
+                { variant: 'success' },
+            );
+        },
+        onFailure: () => {
+            alert.show(
+                strings.eruFormFailedToCreate,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
+    });
+
+    const {
+        trigger: updateEruReadinessForm,
+        pending: updateEruReadinessFormPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/{id}/',
+        method: 'PATCH',
+        pathVariables: isDefined(eruId) ? {
+            id: Number(eruId),
+        } : undefined,
+        body: (ctx: EruReadinessBody) => ctx,
+        onSuccess: () => {
+            alert.show(
+                strings.eruFormSuccessfullyUpdated,
+                { variant: 'success' },
+            );
+        },
+        onFailure: ({
+            value: {
+                messageForNotification,
+                formErrors,
+            },
+            debugMessage,
+        }) => {
+            setError(transformObjectError(formErrors, () => undefined));
+            alert.show(
+                strings.eruFormFailedToUpdate,
+                {
+                    variant: 'danger',
+                    debugMessage,
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+
+    const {
+        response: eruOwnerResponse,
+        pending: eruOwnerPending,
+    } = useRequest({
+        url: '/api/v2/eru_owner/mini/',
+        preserveResponse: true,
+    });
+
+    const eruTypesTitleMap = useMemo(
+        () => (
+            listToMap(
+                deployments_eru_type,
+                (eruType) => eruType.key,
+                (eruType) => eruType.value,
+            )
+        ),
+        [deployments_eru_type],
+    );
+
+    const {
+        setValue: onEruChange,
+    } = useFormArray('eru_types', setFieldValue);
+
+    const eruOwnerOption = eruOwnerResponse?.results;
+
+    const [selectedEruType, setSelectedEruType] = useState<EruTypeOption | undefined>();
+
+    const handleInputChange = useCallback((type: EruTypeOption['key']) => {
+        const newEruTypeItem = {
+            client_id: randomString(),
+            type,
+            id: eruId,
+        };
+
+        setFieldValue(
+            (oldValue: number[] | undefined) => (
+                [...(oldValue ?? []), newEruTypeItem]
+            ),
+            'eru_types' as const,
+        );
+        setSelectedEruType(undefined);
+    }, [
+        eruId,
+        setFieldValue,
+    ]);
+
+    const handleSubmit = useCallback((finalValue: BaseFormType) => {
+        setValue(finalValue);
+        if (isNotDefined(finalValue)) {
+            return;
+        }
+        if (isNotDefined(eruId)) {
+            createEruReadiness(finalValue as EruReadinessPostBody);
+        } else {
+            updateEruReadinessForm(finalValue as EruReadinessBody);
+        }
+    }, [
+        setValue,
+        createEruReadiness,
+        updateEruReadinessForm,
+        eruId,
+    ]);
+
+    const handleSave = useCallback(() => {
+        const handler = createSubmitHandler(
+            validate,
+            setError,
+            handleSubmit,
+        );
+        handler();
+    }, [
+        validate,
+        setError,
+        handleSubmit,
+    ]);
+
+    const disabled = createEruReadinessPending || updateEruReadinessFormPending || eruOwnerPending;
+
+    const handleCancel = useCallback(() => {
+        setFieldValue([], 'eru_types');
+        setFieldValue(undefined, 'eru_owner');
+        setSelectedEruType(undefined);
+    }, [
+        setFieldValue,
+    ]);
+
+    return (
+        <Page
+            className={styles.updateForm}
+            title={strings.eruReadinessFormTitle}
+            heading={strings.eruReadinessFormHeading}
+            description={strings.eruReadinessFormDescription}
+            withBackgroundColorInMainSection
+            mainSectionClassName={styles.content}
+            actions={(
+                <>
+                    <Button
+                        name={undefined}
+                        onClick={handleCancel}
+                        variant="tertiary"
+                    >
+                        {strings.eruCancelButton}
+                    </Button>
+                    <Button
+                        name={undefined}
+                        onClick={handleSave}
+                        variant="secondary"
+                    >
+                        {strings.eruSaveAndCloseButton}
+                    </Button>
+                </>
+            )}
+        >
+            <Container>
+                <InputSection
+                    title={strings.eruNationalSociety}
+                    withAsteriskOnTitle
+                >
+                    <SelectInput
+                        name="eru_owner"
+                        options={eruOwnerOption}
+                        onChange={setFieldValue}
+                        value={value.eru_owner}
+                        keySelector={eruOwnerKeySelector}
+                        labelSelector={eruOwnerLabelSelector}
+                        error={error?.eru_owner}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </Container>
+            <Container>
+                <InputSection
+                    title={strings.eruTypes}
+                >
+                    <MultiSelectInput
+                        name="eru_types"
+                        options={deployments_eru_type}
+                        value={selectedEruType}
+                        keySelector={numericKeySelector}
+                        labelSelector={stringValueSelector}
+                        onChange={(selected) => {
+                            const singleType = Array.isArray(selected) ? selected[0] : selected;
+                            handleInputChange(singleType);
+                        }}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </Container>
+            <div className={styles.eruTypeList}>
+                {value.eru_types?.map((eruType, index) => (
+                    <EruInputItem
+                        key={eruType.id}
+                        index={index}
+                        value={eruType}
+                        onChange={onEruChange}
+                        title={eruTypesTitleMap}
+                        error={getErrorObject(error?.eru_types)}
+                    />
+                ))}
+            </div>
+        </Page>
+    );
+}
+
+Component.displayName = 'EruReadinessForm';
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
new file mode 100644
index 000000000..613f3569c
--- /dev/null
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -0,0 +1,48 @@
+import {
+    type ArraySchema,
+    type ObjectSchema,
+    type PartialForm,
+} from '@togglecorp/toggle-form';
+
+import { type GoApiBody } from '#utils/restRequest';
+
+export type EruReadinessPostBody = GoApiBody<'/api/v2/eru-readiness/', 'POST'>;
+export type EruReadinessBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
+
+export type BaseFormType = PartialForm<EruReadinessBody>;
+
+type FormSchema = ObjectSchema<BaseFormType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+export type EruType = (NonNullable<NonNullable<EruReadinessBody['eru_types']>>[number]) & {
+    client_id: string;
+};
+type EruTypeSchema = ObjectSchema<PartialForm<EruType>, BaseFormType>;
+type EruTypeSchemaFields = ReturnType<EruTypeSchema['fields']>;
+type EruTypesSchema = ArraySchema<PartialForm<EruType>, BaseFormType>;
+type CollectionsSchemaMember = ReturnType<EruTypesSchema['member']>;
+
+const schema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        eru_owner: {
+            required: true,
+        },
+        eru_types: {
+            keySelector: (col) => col.client_id,
+            member: (): CollectionsSchemaMember => ({
+                fields: (): EruTypeSchemaFields => ({
+                    client_id: { },
+                    id: { },
+                    type: { required: true },
+                    equipment_readiness: { required: true },
+                    people_readiness: { required: true },
+                    funding_readiness: { required: true },
+                    comment: { },
+                    has_capacity_to_lead: { },
+                    has_capacity_to_support: { },
+                }),
+            }),
+        },
+    }),
+};
+
+export default schema;
diff --git a/app/src/views/EruReadinessForm/styles.module.css b/app/src/views/EruReadinessForm/styles.module.css
new file mode 100644
index 000000000..b4ea910ae
--- /dev/null
+++ b/app/src/views/EruReadinessForm/styles.module.css
@@ -0,0 +1,13 @@
+.update-form {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-2xl);
+
+        .eru-type-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-lg);
+        }
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
index 4356c1a9f..797927589 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
@@ -1,12 +1,21 @@
 import Link from '#components/Link';
 
+export interface Props {
+    eruId: number;
+}
+
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
-export function Component() {
+export function Component(props: Props) {
+    const {
+        eruId,
+    } = props;
+
     return (
         <Link
             to="updateERUReadinessForm"
             variant="primary"
+            state={{ eruId }}
         >
             Update ERU Readiness
         </Link>

From c2535368feab6dd8aaea89476488f77e07f18b4a Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Sun, 16 Mar 2025 22:58:29 +0545
Subject: [PATCH 2/4] Add ERU Capacity and it's filters

---
 .../EruReadinessForm/EruInputItem/index.tsx   |  17 +-
 app/src/views/EruReadinessForm/i18n.json      |   3 +-
 app/src/views/EruReadinessForm/index.tsx      | 204 ++++++-----
 app/src/views/EruReadinessForm/schema.ts      |  13 +-
 .../EmergencyResponseUnitTypeCard/i18n.json   |   8 +
 .../EmergencyResponseUnitTypeCard/index.tsx   | 212 +++++++++++
 .../styles.module.css                         | 102 ++++++
 .../NationalSocietyTypeCard/i18n.json         |   8 +
 .../NationalSocietyTypeCard/index.tsx         | 119 +++++++
 .../NationalSocietyTypeCard/styles.module.css |  37 ++
 .../EmergencyResponseUnit/index.tsx           | 328 +++++++++++++++++-
 .../EmergencyResponseUnit/styles.module.css   |   7 +
 12 files changed, 945 insertions(+), 113 deletions(-)
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css

diff --git a/app/src/views/EruReadinessForm/EruInputItem/index.tsx b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
index 5c2510186..5ff8ecd5f 100644
--- a/app/src/views/EruReadinessForm/EruInputItem/index.tsx
+++ b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
@@ -6,10 +6,7 @@ import {
     TextArea,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    isDefined,
-    randomString,
-} from '@togglecorp/fujs';
+import { randomString } from '@togglecorp/fujs';
 import {
     type ArrayError,
     getErrorObject,
@@ -46,7 +43,7 @@ interface Props {
     index: number;
     value: PartialForm<EruType>;
     onChange: (value: SetValueArg<PartialForm<EruType>>, index: number) => void;
-    title: Record<string, string> | undefined;
+    title: string | undefined;
     error: ArrayError<EruType> | undefined;
 }
 
@@ -70,9 +67,7 @@ function EruInputItem(props: Props) {
         onChange,
         defaultCollectionValue,
     );
-    const eruTypeLabel = isDefined(value.type)
-        ? title?.[value.type]
-        : undefined;
+
     const error = (value && value.client_id && errorFromProps)
         ? getErrorObject(errorFromProps?.[value.client_id])
         : undefined;
@@ -80,7 +75,7 @@ function EruInputItem(props: Props) {
     return (
         <Container
             childrenContainerClassName={styles.eruTypes}
-            heading={eruTypeLabel}
+            heading={title}
         >
             <InputSection
                 className={styles.readinessOptions}
@@ -140,14 +135,14 @@ function EruInputItem(props: Props) {
                 <Checkbox
                     label={strings.eruLead}
                     name="has_capacity_to_lead"
-                    value={value.has_capacity_to_lead}
+                    value={value?.has_capacity_to_lead}
                     onChange={onFieldChange}
                     error={error?.has_capacity_to_lead}
                 />
                 <Checkbox
                     label={strings.eruSupport}
                     name="has_capacity_to_support"
-                    value={value.has_capacity_to_support}
+                    value={value?.has_capacity_to_support}
                     onChange={onFieldChange}
                     error={error?.has_capacity_to_support}
                 />
diff --git a/app/src/views/EruReadinessForm/i18n.json b/app/src/views/EruReadinessForm/i18n.json
index f33d331b0..210fe3131 100644
--- a/app/src/views/EruReadinessForm/i18n.json
+++ b/app/src/views/EruReadinessForm/i18n.json
@@ -11,6 +11,7 @@
         "eruFormCreatedSuccessfully": "ERU Readiness Created Successfully",
         "eruFormFailedToCreate": "Failed to create a ERU Readiness",
         "eruFormSuccessfullyUpdated": "Successfully Updated ERU Readiness Form",
-        "eruFormFailedToUpdate": "Failed to Update ERU Readiness Form"
+        "eruFormFailedToUpdate": "Failed to Update ERU Readiness Form",
+        "eruNoRecord": "No Existing Record"
     }
 }
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
index 5ed62426c..cd73952aa 100644
--- a/app/src/views/EruReadinessForm/index.tsx
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -1,6 +1,5 @@
 import {
     useCallback,
-    useMemo,
     useState,
 } from 'react';
 import {
@@ -11,14 +10,9 @@ import {
     SelectInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
 import {
-    numericKeySelector,
-    stringValueSelector,
-} from '@ifrc-go/ui/utils';
-import {
-    isDefined,
     isNotDefined,
-    listToMap,
     randomString,
 } from '@togglecorp/fujs';
 import {
@@ -43,7 +37,6 @@ import EruInputItem from './EruInputItem';
 import schema, {
     type BaseFormType,
     type EruReadinessBody,
-    type EruReadinessPostBody,
 } from './schema';
 
 import i18n from './i18n.json';
@@ -63,13 +56,12 @@ function eruOwnerLabelSelector(option: EruOwnerOption) {
 
 const defaultFormValues: PartialForm<EruReadinessBody> = {};
 
+const eruTypeKeySelector = (eruType: EruTypeOption) => eruType.key;
+
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
-    // const { eruId } = useParams<{ eruId: number }>();
-    // TODO: Use useParams for eruId
-    const eruId = 1;
 
     const alert = useAlertContext();
     const {
@@ -90,28 +82,11 @@ export function Component() {
 
     const error = getErrorObject(formError);
 
-    const {
-        pending: createEruReadinessPending,
-        trigger: createEruReadiness,
-    } = useLazyRequest({
-        url: '/api/v2/eru-readiness/',
-        method: 'POST',
-        body: (ctx: EruReadinessPostBody) => ctx,
-        onSuccess: () => {
-            alert.show(
-                strings.eruFormCreatedSuccessfully,
-                { variant: 'success' },
-            );
-        },
-        onFailure: () => {
-            alert.show(
-                strings.eruFormFailedToCreate,
-                {
-                    variant: 'danger',
-                },
-            );
-        },
-    });
+    const [eruId, setEruId] = useState<number | undefined>();
+
+    const [selectedEruTypeList, setSelectedEruTypeList] = useState<EruTypeOption['key'][] | undefined>();
+
+    const [selectedEruOwner, setSelectedEruOwner] = useState<EruOwnerOption['id']>();
 
     const {
         trigger: updateEruReadinessForm,
@@ -119,9 +94,7 @@ export function Component() {
     } = useLazyRequest({
         url: '/api/v2/eru-readiness/{id}/',
         method: 'PATCH',
-        pathVariables: isDefined(eruId) ? {
-            id: Number(eruId),
-        } : undefined,
+        pathVariables: eruId !== undefined ? { id: Number(eruId) } : undefined,
         body: (ctx: EruReadinessBody) => ctx,
         onSuccess: () => {
             alert.show(
@@ -156,16 +129,35 @@ export function Component() {
         preserveResponse: true,
     });
 
-    const eruTypesTitleMap = useMemo(
-        () => (
-            listToMap(
-                deployments_eru_type,
-                (eruType) => eruType.key,
-                (eruType) => eruType.value,
-            )
-        ),
-        [deployments_eru_type],
-    );
+    const {
+        trigger: fetchEruReadinessData,
+        pending: fetchEruReadinessDataPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/',
+        query: (eruOwnerId: number) => ({ eru_owner: eruOwnerId }),
+        onSuccess: (response) => {
+            const results = response?.results ?? [];
+            if (results?.length > 0) {
+                const existingData = results[0];
+                setEruId(existingData.id);
+                setValue({
+                    ...existingData,
+                    eru_owner: existingData.eru_owner_details?.id,
+                    eru_types: existingData.eru_types?.map((eruType) => ({
+                        ...eruType,
+                        id: eruType.type,
+                    })),
+                });
+                setSelectedEruTypeList(existingData.eru_types?.map((eruType) => eruType.type));
+                setSelectedEruOwner(existingData.eru_owner_details?.id);
+            } else {
+                setEruId(undefined);
+                setValue({ ...defaultFormValues, eru_owner: undefined });
+                setSelectedEruTypeList(undefined);
+                setSelectedEruOwner(undefined);
+            }
+        },
+    });
 
     const {
         setValue: onEruChange,
@@ -173,42 +165,50 @@ export function Component() {
 
     const eruOwnerOption = eruOwnerResponse?.results;
 
-    const [selectedEruType, setSelectedEruType] = useState<EruTypeOption | undefined>();
-
-    const handleInputChange = useCallback((type: EruTypeOption['key']) => {
-        const newEruTypeItem = {
-            client_id: randomString(),
-            type,
-            id: eruId,
-        };
-
-        setFieldValue(
-            (oldValue: number[] | undefined) => (
-                [...(oldValue ?? []), newEruTypeItem]
-            ),
-            'eru_types' as const,
-        );
-        setSelectedEruType(undefined);
-    }, [
-        eruId,
-        setFieldValue,
-    ]);
-
     const handleSubmit = useCallback((finalValue: BaseFormType) => {
         setValue(finalValue);
-        if (isNotDefined(finalValue)) {
+
+        if (isNotDefined(finalValue) || !finalValue.eru_owner) {
             return;
         }
+
         if (isNotDefined(eruId)) {
-            createEruReadiness(finalValue as EruReadinessPostBody);
-        } else {
-            updateEruReadinessForm(finalValue as EruReadinessBody);
+            alert.show(
+                strings.eruNoRecord,
+                { variant: 'warning' },
+            );
+            return;
         }
+
+        const updatedEruTypes = (selectedEruTypeList || []).map((type) => {
+            const existingEru = finalValue.eru_types?.find((eruType) => eruType.type === type);
+
+            return {
+                id: existingEru?.id ?? undefined,
+                type,
+                comment: existingEru?.comment ?? null,
+                equipment_readiness: existingEru?.equipment_readiness ?? 1,
+                people_readiness: existingEru?.people_readiness ?? 1,
+                funding_readiness: existingEru?.funding_readiness ?? 1,
+                has_capacity_to_lead: existingEru?.has_capacity_to_lead ?? false,
+                has_capacity_to_support: existingEru?.has_capacity_to_support ?? false,
+            };
+        });
+
+        const updatedFinalValue: EruReadinessBody = {
+            ...finalValue,
+            eru_types: updatedEruTypes,
+            eru_owner: finalValue.eru_owner,
+        };
+
+        updateEruReadinessForm(updatedFinalValue);
     }, [
+        alert,
         setValue,
-        createEruReadiness,
         updateEruReadinessForm,
         eruId,
+        selectedEruTypeList,
+        strings.eruNoRecord,
     ]);
 
     const handleSave = useCallback(() => {
@@ -224,16 +224,53 @@ export function Component() {
         handleSubmit,
     ]);
 
-    const disabled = createEruReadinessPending || updateEruReadinessFormPending || eruOwnerPending;
+    const disabled = updateEruReadinessFormPending
+        || eruOwnerPending || fetchEruReadinessDataPending;
 
     const handleCancel = useCallback(() => {
         setFieldValue([], 'eru_types');
-        setFieldValue(undefined, 'eru_owner');
-        setSelectedEruType(undefined);
+        setSelectedEruOwner(undefined);
+        setSelectedEruTypeList(undefined);
     }, [
         setFieldValue,
     ]);
 
+    const handleSelectERUType = useCallback((values: EruTypeOption['key'][] | undefined) => {
+        setSelectedEruTypeList(values);
+
+        const existingEruTypeList = value.eru_types?.map((eruType) => eruType.id);
+        const addedEruTypeList = values?.filter((v) => !existingEruTypeList?.includes(v));
+        const removedEruTypeList = existingEruTypeList?.filter((v) => !values?.includes(v));
+
+        const addedEruTypeObjectList = addedEruTypeList?.map((a) => ({
+            clientId: randomString(),
+            id: a,
+            type: a,
+        }));
+
+        const newFieldValues = value.eru_types?.filter(
+            (fv) => !removedEruTypeList?.includes(fv.id),
+        );
+
+        setFieldValue([...(newFieldValues ?? []), ...(addedEruTypeObjectList ?? [])], 'eru_types');
+    }, [value.eru_types, setFieldValue]);
+
+    const handleEruOwnerChange = useCallback(
+        (newValue: number | undefined) => {
+            setSelectedEruOwner(newValue);
+            setFieldValue(newValue, 'eru_owner');
+
+            if (newValue) {
+                setValue({});
+                fetchEruReadinessData(newValue);
+            } else {
+                setValue({ ...defaultFormValues, eru_owner: undefined });
+                setSelectedEruTypeList(undefined);
+            }
+        },
+        [setFieldValue, fetchEruReadinessData, setValue],
+    );
+
     return (
         <Page
             className={styles.updateForm}
@@ -269,8 +306,8 @@ export function Component() {
                     <SelectInput
                         name="eru_owner"
                         options={eruOwnerOption}
-                        onChange={setFieldValue}
-                        value={value.eru_owner}
+                        onChange={handleEruOwnerChange}
+                        value={selectedEruOwner}
                         keySelector={eruOwnerKeySelector}
                         labelSelector={eruOwnerLabelSelector}
                         error={error?.eru_owner}
@@ -285,13 +322,10 @@ export function Component() {
                     <MultiSelectInput
                         name="eru_types"
                         options={deployments_eru_type}
-                        value={selectedEruType}
-                        keySelector={numericKeySelector}
+                        value={selectedEruTypeList}
+                        keySelector={eruTypeKeySelector}
                         labelSelector={stringValueSelector}
-                        onChange={(selected) => {
-                            const singleType = Array.isArray(selected) ? selected[0] : selected;
-                            handleInputChange(singleType);
-                        }}
+                        onChange={handleSelectERUType}
                         disabled={disabled}
                     />
                 </InputSection>
@@ -303,7 +337,9 @@ export function Component() {
                         index={index}
                         value={eruType}
                         onChange={onEruChange}
-                        title={eruTypesTitleMap}
+                        title={deployments_eru_type?.find(
+                            (type) => type.key === eruType.type,
+                        )?.value}
                         error={getErrorObject(error?.eru_types)}
                     />
                 ))}
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
index 613f3569c..39d4379ff 100644
--- a/app/src/views/EruReadinessForm/schema.ts
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -6,7 +6,6 @@ import {
 
 import { type GoApiBody } from '#utils/restRequest';
 
-export type EruReadinessPostBody = GoApiBody<'/api/v2/eru-readiness/', 'POST'>;
 export type EruReadinessBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
 
 export type BaseFormType = PartialForm<EruReadinessBody>;
@@ -16,10 +15,12 @@ type FormSchemaFields = ReturnType<FormSchema['fields']>;
 export type EruType = (NonNullable<NonNullable<EruReadinessBody['eru_types']>>[number]) & {
     client_id: string;
 };
+export type EruTypesType = NonNullable<BaseFormType['eru_types']>[number];
+
 type EruTypeSchema = ObjectSchema<PartialForm<EruType>, BaseFormType>;
 type EruTypeSchemaFields = ReturnType<EruTypeSchema['fields']>;
 type EruTypesSchema = ArraySchema<PartialForm<EruType>, BaseFormType>;
-type CollectionsSchemaMember = ReturnType<EruTypesSchema['member']>;
+export type EruTypesSchemaMember = ReturnType<EruTypesSchema['member']>;
 
 const schema: FormSchema = {
     fields: (): FormSchemaFields => ({
@@ -28,17 +29,17 @@ const schema: FormSchema = {
         },
         eru_types: {
             keySelector: (col) => col.client_id,
-            member: (): CollectionsSchemaMember => ({
+            member: (): EruTypesSchemaMember => ({
                 fields: (): EruTypeSchemaFields => ({
                     client_id: { },
-                    id: { },
+                    id: { defaultValue: undefined },
                     type: { required: true },
                     equipment_readiness: { required: true },
                     people_readiness: { required: true },
                     funding_readiness: { required: true },
                     comment: { },
-                    has_capacity_to_lead: { },
-                    has_capacity_to_support: { },
+                    has_capacity_to_lead: { defaultValue: false },
+                    has_capacity_to_support: { defaultValue: false },
                 }),
             }),
         },
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json
new file mode 100644
index 000000000..e2c805486
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "surgeOverview",
+    "strings": {
+        "emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
+        "emergencyResponseUnitOwnerCardReady": "{count} Ready ERUs",
+        "emergencyResponseUnitOwnerCardDeployed": "{count} Deployed ERUs"
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
new file mode 100644
index 000000000..67f2eb389
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
@@ -0,0 +1,212 @@
+import { AlertCheckLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Heading,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
+
+interface NationalSociety {
+    name: string;
+    ns_funding_readiness: number;
+    ns_equipment_readiness: number;
+    ns_people_readiness: number;
+}
+
+interface Props {
+    className?: string;
+    typeDisplay: string;
+    nationalSocieties?: NationalSociety[];
+    fundingReadiness: number;
+    equipmentReadiness: number;
+    peopleReadiness: number;
+    updatedAt?: string;
+}
+
+function EmergencyResponseUnitTypeCard(props: Props) {
+    const {
+        className,
+        typeDisplay,
+        nationalSocieties,
+        fundingReadiness,
+        equipmentReadiness,
+        peopleReadiness,
+        updatedAt,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    const getReadinessColor = (rank: number) => {
+        if (rank === 1) return styles.greenIcon;
+        if (rank === 2) return styles.yellowIcon;
+        return styles.redIcon;
+    };
+
+    const nationalSocietyList = nationalSocieties?.flatMap((society) => society?.name).join(', ');
+
+    return (
+        <Container
+            className={_cs(styles.emergencyResponseTypeCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            spacing="default"
+            heading={typeDisplay}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={updatedAt}
+                    valueType="date"
+                />
+            )}
+            footerContentClassName={styles.readinessList}
+            footerContent={(
+                <>
+                    <div className={styles.separator} />
+                    <div className={styles.figures}>
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Equipment Readiness"
+                            value={(
+                                <AlertCheckLineIcon
+                                    className={`${styles.readinessIcon}
+                            ${getReadinessColor(equipmentReadiness)}`}
+                                />
+                            )}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="People Readiness"
+                            value={(
+                                <AlertCheckLineIcon
+                                    className={`${styles.readinessIcon}
+                            ${getReadinessColor(peopleReadiness)}`}
+                                />
+                            )}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Funding Readiness"
+                            value={(
+                                <AlertCheckLineIcon
+                                    className={`${styles.readinessIcon}
+                            ${getReadinessColor(fundingReadiness)}`}
+                                />
+                            )}
+                            withoutLabelColon
+                        />
+                    </div>
+                    <div className={styles.separator} />
+                    <Button
+                        className={styles.showIcon}
+                        name={undefined}
+                        onClick={setShowReadinessInfoTrue}
+                        variant="tertiary"
+                        title="Show Readiness Information"
+                    >
+                        Show Readiness Information
+                    </Button>
+                </>
+            )}
+        >
+            <TextOutput
+                className={styles.eruOwners}
+                label="National Society"
+                value={nationalSocietyList}
+                strongValue
+                withoutLabelColon
+            />
+            {showReadinessInfo && (
+                <Modal
+                    modalContainerClassName={styles.modal}
+                    heading={typeDisplay}
+                    headingDescription="Readiness Information by National Society"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                    size="sm"
+                    childrenContainerClassName={styles.societyList}
+                >
+                    {nationalSocieties?.map((society) => (
+                        <>
+                            <Heading
+                                level={5}
+                            >
+                                {society.name}
+                            </Heading>
+                            <div className={styles.separator} />
+                            <div className={styles.figures}>
+                                <TextOutput
+                                    className={styles.readiness}
+                                    label="Equipment Readiness"
+                                    value={(
+                                        <AlertCheckLineIcon
+                                            className={`${styles.readinessIcon}
+                                        ${getReadinessColor(society.ns_equipment_readiness)}`}
+                                        />
+                                    )}
+                                    valueClassName={styles.readinessIcon}
+                                    withoutLabelColon
+                                />
+                                <div className={styles.separatorLeft} />
+                                <TextOutput
+                                    className={styles.readiness}
+                                    label="People Readiness"
+                                    value={(
+                                        <AlertCheckLineIcon
+                                            className={`${styles.readinessIcon}
+                                        ${getReadinessColor(society.ns_people_readiness)}`}
+                                        />
+                                    )}
+                                    valueClassName={styles.readinessIcon}
+                                    withoutLabelColon
+                                />
+                                <div className={styles.separatorLeft} />
+                                <TextOutput
+                                    className={styles.readiness}
+                                    label="Funding Readiness"
+                                    value={(
+                                        <AlertCheckLineIcon
+                                            className={`${styles.readinessIcon}
+                                        ${getReadinessColor(society.ns_funding_readiness)}`}
+                                        />
+                                    )}
+                                    valueClassName={styles.readinessIcon}
+                                    withoutLabelColon
+                                />
+                            </div>
+                            <div className={styles.separator} />
+                        </>
+                    ))}
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default EmergencyResponseUnitTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
new file mode 100644
index 000000000..9aa39fc9a
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
@@ -0,0 +1,102 @@
+.emergency-response-type-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+
+    .figures {
+        display: flex;
+        gap: var(--go-ui-spacing-sm);
+        flex-grow: 1;
+
+        .readiness {
+            display: flex;
+            flex-direction: column-reverse;
+        }
+
+        .readiness-icon {
+            font-size: 1.7rem;
+        }
+
+        .green-icon {
+            color: var(--go-ui-color-green);
+        }
+
+        .yellow-icon {
+            color: var(--go-ui-color-semantic-yellow);
+        }
+
+        .red-icon {
+            color: var(--go-ui-color-primary-red);
+        }
+    }
+
+    .readiness-list {
+        display: flex;
+        flex-direction: column;
+
+        .separator {
+            flex-shrink: 0;
+            border-bottom: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        }
+
+        .separator-left {
+            flex-shrink: 0;
+            border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        }
+
+        .show-icon {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+}
+.modal {
+    display: flex;
+    flex-direction: column;
+
+    .society-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-sm);
+    }
+
+    .separator {
+        flex-shrink: 0;
+        border-bottom: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+    }
+
+        .figures {
+            display: flex;
+            gap: var(--go-ui-spacing-sm);
+            flex-grow: 1;
+
+        .separator-left {
+            flex-shrink: 0;
+            border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        }
+            .readiness {
+                display: flex;
+                flex-direction: column-reverse;
+                padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-md);
+            }
+
+            .readiness-icon {
+                font-size: 1.7rem;
+            }
+
+            .green-icon {
+                color: var(--go-ui-color-green);
+            }
+
+            .yellow-icon {
+                color: var(--go-ui-color-semantic-yellow);
+            }
+
+            .red-icon {
+                color: var(--go-ui-color-primary-red);
+            }
+        }
+    }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json
new file mode 100644
index 000000000..e2c805486
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "surgeOverview",
+    "strings": {
+        "emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
+        "emergencyResponseUnitOwnerCardReady": "{count} Ready ERUs",
+        "emergencyResponseUnitOwnerCardDeployed": "{count} Deployed ERUs"
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
new file mode 100644
index 000000000..e24acbd0a
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
@@ -0,0 +1,119 @@
+import { AlertCheckLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Heading,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
+type EruTypesList = NonNullable<EruReadinessListItem['eru_types']>[number];
+
+interface Props {
+    className?: string;
+    societyName? : string;
+    updatedAt?: string;
+    eruTypes?: EruReadinessListItem;
+}
+
+function NationalSocietyTypeCard(props: Props) {
+    const {
+        className,
+        societyName,
+        updatedAt,
+        eruTypes,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    const eruTypesList = eruTypes?.eru_types?.map((i) => i.type).join(', ');
+
+    return (
+        <Container
+            className={_cs(styles.emergencyResponseUnitOwnerCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            spacing="default"
+            heading={societyName}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={updatedAt}
+                    valueType="date"
+                />
+            )}
+            // childrenContainerClassName={styles.figures}
+        >
+            <TextOutput
+                className={styles.lastUpdated}
+                label="ERU Types"
+                value={eruTypesList}
+                withoutLabelColon
+            />
+            <Button
+                name={undefined}
+                onClick={setShowReadinessInfoTrue}
+                variant="tertiary"
+                title="Show Readiness Information"
+            >
+                Show Readiness Information
+            </Button>
+            {showReadinessInfo && (
+                <Modal
+                    heading={societyName}
+                    headingDescription="Readiness Information by ERU Type"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                >
+                    <Heading>
+                        {eruTypesList}
+                    </Heading>
+                    <TextOutput
+                        className={styles.lastUpdated}
+                        label="Equipment Readiness"
+                        value={<AlertCheckLineIcon />}
+                        valueClassName={styles.readinessIcon}
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.lastUpdated}
+                        label="People Readiness"
+                        value={<AlertCheckLineIcon />}
+                        valueClassName={styles.readinessIcon}
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.lastUpdated}
+                        label="Funding Readiness"
+                        value={<AlertCheckLineIcon />}
+                        valueClassName={styles.readinessIcon}
+                        withoutLabelColon
+                    />
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default NationalSocietyTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
new file mode 100644
index 000000000..5d31cea3a
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
@@ -0,0 +1,37 @@
+.emergency-response-unit-owner-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+
+        .separator {
+            flex-shrink: 0;
+            border-top: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        }
+
+        .readiness-icon {
+            height: 100%;
+        }
+
+        .figure {
+            flex-basis: 50%;
+
+            .content {
+                display: grid;
+                grid-template-columns: 6fr 1fr;
+                gap: var(--go-ui-spacing-xs);
+                align-content: flex-start;
+
+                .text-output {
+                    display: contents;
+                }
+
+                .label {
+                    line-height: var(--go-ui-line-height-xs);
+                    font-size: var(--go-ui-font-size-sm);
+                }
+            }
+        }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
index 797927589..b9e17cc54 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
@@ -1,24 +1,330 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Button,
+    Container,
+    Grid,
+    SelectInput,
+} from '@ifrc-go/ui';
+import { numericKeySelector } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+
 import Link from '#components/Link';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useFilterState from '#hooks/useFilterState';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import EmergencyResponseUnitTypeCard from './EmergencyResponseUnitTypeCard';
+import NationalSocietyTypeCard from './NationalSocietyTypeCard';
+
+import styles from './styles.module.css';
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
+type EruOwnerOption = NonNullable<EruOwners['results']>[number];
+type EruTypesOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
 
-export interface Props {
-    eruId: number;
+function eruOwnerKeySelector(option: EruOwnerOption) {
+    return option.id;
 }
+function eruOwnerLabelSelector(option: EruOwnerOption) {
+    return option.national_society_country_details.society_name ?? '';
+}
+const emergencyResponseUnitTypeKeySelector = (item: EruTypesOption) => item.key;
+const emergencyResponseUnitTypeLabelSelector = (item: EruTypesOption) => item.value ?? '?';
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
-export function Component(props: Props) {
+export function Component() {
+    const {
+        rawFilter,
+        filtered,
+        filter,
+        setFilterField,
+    } = useFilterState<{
+        selectEruTypes? : EruTypesOption['key'],
+        selectEruOwner? : EruOwnerOption['id'],
+    }>({
+        filter: {},
+    });
+
+    const {
+        error: eruOwnersError,
+        response: eruOwnersResponse,
+        pending: eruOwnersPending,
+    } = useRequest({
+        url: '/api/v2/eru_owner/mini/',
+        preserveResponse: true,
+    });
+
+    const {
+        error: eruReadinessError,
+        response: eruReadinessResponse,
+        pending: eruReadinessPending,
+    } = useRequest({
+        url: '/api/v2/eru-readiness/',
+        preserveResponse: true,
+        query: {
+            eru_type: filter.selectEruTypes,
+            eru_owner: filter.selectEruOwner,
+        },
+    });
+
     const {
-        eruId,
-    } = props;
+        deployments_eru_type,
+    } = useGlobalEnums();
+
+    const [filterMode, setFilterMode] = useState<'eruType' | 'nationalSociety'>('nationalSociety');
+
+    const eruOwnersOption = eruOwnersResponse?.results;
+
+    const eruRendererParams = useCallback((_: number, item) => ({
+        type: item.type,
+        typeDisplay: item.type_display,
+        nationalSocieties: item.national_societies,
+        fundingReadiness: item.funding_readiness,
+        equipmentReadiness: item.equipment_readiness,
+        peopleReadiness: item.people_readiness,
+        updatedAt: item.updated_at,
+    }), []);
+
+    const nsRendererParams = useCallback((_: number, item) => ({
+        type: item.type,
+        updatedAt: item.updated_at,
+        societyName: item.society_name,
+        eruTypes: item.er
+    }), []);
+
+    const uniqueEruReadinessData = useMemo(() => {
+        const eruTypeMap = new Map<
+    number,
+    {
+      type: number;
+      type_display: string;
+      national_societies: {
+        name: string;
+        ns_funding_readiness: number;
+        ns_equipment_readiness: number;
+        ns_people_readiness: number;
+      }[];
+      funding_readiness: number;
+      equipment_readiness: number;
+      people_readiness: number;
+      updated_at: string;
+    }
+  >();
+
+        eruReadinessResponse?.results?.forEach((item) => {
+            item.eru_types.forEach((eruType) => {
+                if (!eruTypeMap.has(eruType.type)) {
+                    eruTypeMap.set(eruType.type, {
+                        type: eruType.type,
+                        type_display: eruType.type_display,
+                        national_societies: [],
+                        funding_readiness: Infinity,
+                        equipment_readiness: Infinity,
+                        people_readiness: Infinity,
+                        updated_at: item.updated_at,
+                    });
+                }
+
+                const entry = eruTypeMap.get(eruType.type)!;
+
+                entry.funding_readiness = Math.min(
+                    entry.funding_readiness,
+                    eruType.funding_readiness,
+                );
+                entry.equipment_readiness = Math.min(
+                    entry.equipment_readiness,
+                    eruType.equipment_readiness,
+                );
+                entry.people_readiness = Math.min(
+                    entry.people_readiness,
+                    eruType.people_readiness,
+                );
+
+                const nsName = item.eru_owner_details
+                    ?.national_society_country_details?.society_name;
+
+                if (nsName) {
+                    let nsEntry = entry.national_societies.find((ns) => ns.name === nsName);
+
+                    if (!nsEntry) {
+                        nsEntry = {
+                            name: nsName,
+                            ns_funding_readiness: eruType.funding_readiness,
+                            ns_equipment_readiness: eruType.equipment_readiness,
+                            ns_people_readiness: eruType.people_readiness,
+                        };
+                        entry.national_societies.push(nsEntry);
+                    } else {
+                        nsEntry.ns_funding_readiness = eruType.funding_readiness;
+                        nsEntry.ns_equipment_readiness = eruType.equipment_readiness;
+                        nsEntry.ns_people_readiness = eruType.people_readiness;
+                    }
+                }
+
+                if (new Date(item.updated_at) > new Date(entry.updated_at)) {
+                    entry.updated_at = item.updated_at;
+                }
+            });
+        });
+
+        return Array.from(eruTypeMap.values());
+    }, [eruReadinessResponse]);
+
+    const uniqueNationalSocietyData = useMemo(() => {
+        const societyMap = new Map<number, {
+        society_name: string | undefined | null;
+        eru_types: {
+            type: EruTypesOption;
+            readiness: {
+                equipment_readiness: number;
+                people_readiness: number;
+                funding_readiness: number;
+            };
+        }[];
+        latest_updated_at: string;
+    }>();
+
+        eruReadinessResponse?.results?.forEach((item) => {
+            item.eru_types.forEach((eruType) => {
+                const owner = item.eru_owner_details;
+
+                // If the societyMap does not have the owner yet, create a new entry
+                if (!societyMap.has(owner.id)) {
+                    societyMap.set(owner.id, {
+                        society_name: owner?.national_society_country_details?.society_name,
+                        eru_types: [
+                            {
+                                type: eruType, // Storing the entire eruType object
+                            },
+                        ],
+                        latest_updated_at: item.updated_at,
+                    });
+                } else {
+                    const entry = societyMap.get(owner.id);
+                    if (entry) {
+                    // Update the latest updated time if necessary
+                        entry.latest_updated_at = entry.latest_updated_at > item.updated_at
+                            ? entry.latest_updated_at
+                            : item.updated_at;
+
+                        // Check if the eru_type already exists, if not, add it
+                        const existingEruType = entry.eru_types.find(
+                            (typeEntry) => typeEntry.type.key === eruType.key,
+                        );
+                        if (!existingEruType) {
+                        // If not found, add new entry for this eru_type
+                            entry.eru_types.push({
+                                type: eruType,
+                                readiness: {
+                                    equipment_readiness: eruType.equipment_readiness,
+                                    people_readiness: eruType.people_readiness,
+                                    funding_readiness: eruType.funding_readiness,
+                                },
+                            });
+                        }
+                    }
+                }
+            });
+        });
+
+        return Array.from(societyMap.values());
+    }, [eruReadinessResponse]);
+
+    console.info('ns', uniqueNationalSocietyData);
 
     return (
-        <Link
-            to="updateERUReadinessForm"
-            variant="primary"
-            state={{ eruId }}
+        <Container
+            className={styles.emergencyResponseUnit}
+            heading="ERU Capacity and Readiness"
+            withHeaderBorder
+            actions={(
+                <Link
+                    to="updateERUReadinessForm"
+                    variant="primary"
+                >
+                    Update ERU Readiness
+                </Link>
+            )}
+            contentViewType="vertical"
+            filterActions={(
+                <>
+                    <Button
+                        name={undefined}
+                        onClick={() => setFilterMode('eruType')}
+                        variant="tertiary"
+                    >
+                        ERU Type
+                    </Button>
+                    <div className={styles.separator} />
+                    <Button
+                        name={undefined}
+                        onClick={() => setFilterMode('nationalSociety')}
+                        variant="tertiary"
+                    >
+                        National Society Type
+                    </Button>
+                </>
+            )}
+            filters={(
+                <>
+
+                    <SelectInput
+                        placeholder="National Society"
+                        name="selectEruOwner"
+                        options={eruOwnersOption}
+                        onChange={setFilterField}
+                        value={rawFilter.selectEruOwner}
+                        keySelector={eruOwnerKeySelector}
+                        labelSelector={eruOwnerLabelSelector}
+                    />
+                    <SelectInput
+                        placeholder="ERU Type"
+                        name="selectEruTypes"
+                        value={rawFilter.selectEruTypes}
+                        onChange={setFilterField}
+                        keySelector={emergencyResponseUnitTypeKeySelector}
+                        labelSelector={emergencyResponseUnitTypeLabelSelector}
+                        options={deployments_eru_type}
+                    />
+                </>
+            )}
         >
-            Update ERU Readiness
-        </Link>
+            {filterMode === 'eruType' && (
+                <Grid
+                    numPreferredColumns={3}
+                    data={uniqueEruReadinessData}
+                    pending={eruReadinessPending}
+                    errored={isDefined(eruReadinessError)}
+                    filtered={filtered}
+                    keySelector={numericKeySelector}
+                    renderer={EmergencyResponseUnitTypeCard}
+                    rendererParams={eruRendererParams}
+                />
+            )}
+            {filterMode === 'nationalSociety' && (
+                <Grid
+                    numPreferredColumns={3}
+                    data={uniqueNationalSocietyData}
+                    pending={eruOwnersPending}
+                    errored={isDefined(eruOwnersError)}
+                    filtered={filtered}
+                    keySelector={numericKeySelector}
+                    renderer={NationalSocietyTypeCard}
+                    rendererParams={nsRendererParams}
+                />
+            )}
+        </Container>
     );
 }
 
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css
new file mode 100644
index 000000000..a98b08205
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css
@@ -0,0 +1,7 @@
+.emergency-response-unit {
+    .separator {
+        flex-shrink: 0;
+        border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        height: 1rem;
+    }
+}

From 7178bdda32383f995fe0d3cf8015ff6b8f23912a Mon Sep 17 00:00:00 2001
From: samshara <sameerai2736@gmail.com>
Date: Thu, 20 Mar 2025 15:31:44 +0545
Subject: [PATCH 3/4] feat: refactor ERU readiness form

---
 .../EruReadinessForm/EruInputItem/index.tsx   |  47 +--
 .../EruInputItem/styles.module.css            |  20 +-
 app/src/views/EruReadinessForm/i18n.json      |  20 +-
 app/src/views/EruReadinessForm/index.tsx      | 330 ++++++++++--------
 app/src/views/EruReadinessForm/schema.ts      |  45 ++-
 .../views/EruReadinessForm/styles.module.css  |  17 +-
 .../EmergencyResponseUnit/index.tsx           |  14 +-
 7 files changed, 286 insertions(+), 207 deletions(-)

diff --git a/app/src/views/EruReadinessForm/EruInputItem/index.tsx b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
index 5ff8ecd5f..ce2eea385 100644
--- a/app/src/views/EruReadinessForm/EruInputItem/index.tsx
+++ b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import {
     Checkbox,
-    Container,
     InputSection,
     RadioInput,
     TextArea,
@@ -10,7 +10,6 @@ import { randomString } from '@togglecorp/fujs';
 import {
     type ArrayError,
     getErrorObject,
-    type PartialForm,
     type SetValueArg,
     useFormObject,
 } from '@togglecorp/toggle-form';
@@ -18,7 +17,7 @@ import {
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import { type GoApiResponse } from '#utils/restRequest';
 
-import { type EruType } from '../schema';
+import { type PartialEruItem } from '../schema';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -35,16 +34,15 @@ function readinessLabelSelector(option: ReadinessOption) {
     return option.value;
 }
 
-const defaultCollectionValue: PartialForm<EruType> = {
+const defaultCollectionValue: PartialEruItem = {
     client_id: randomString(),
 };
 
 interface Props {
     index: number;
-    value: PartialForm<EruType>;
-    onChange: (value: SetValueArg<PartialForm<EruType>>, index: number) => void;
-    title: string | undefined;
-    error: ArrayError<EruType> | undefined;
+    value: PartialEruItem;
+    onChange: (value: SetValueArg<PartialEruItem>, index: number) => void;
+    error: ArrayError<PartialEruItem> | undefined;
 }
 
 function EruInputItem(props: Props) {
@@ -52,13 +50,13 @@ function EruInputItem(props: Props) {
         index,
         value,
         onChange,
-        title,
         error: errorFromProps,
     } = props;
 
     const strings = useTranslation(i18n);
 
     const {
+        deployments_eru_type: eruTypeOptions,
         deployments_eru_readiness_status,
     } = useGlobalEnums();
 
@@ -72,17 +70,23 @@ function EruInputItem(props: Props) {
         ? getErrorObject(errorFromProps?.[value.client_id])
         : undefined;
 
+    const title = useMemo(() => (
+        eruTypeOptions?.find((eruType) => eruType.key === value.type)?.value
+    ), [eruTypeOptions, value.type]);
+
     return (
-        <Container
-            childrenContainerClassName={styles.eruTypes}
-            heading={title}
+        <InputSection
+            title={title}
+            className={styles.eruInputItem}
+            contentSectionClassName={styles.content}
         >
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruEquipmentReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="equipment_readiness"
                     value={value.equipment_readiness}
                     onChange={onFieldChange}
@@ -93,11 +97,12 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruPeopleReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="people_readiness"
                     value={value.people_readiness}
                     onChange={onFieldChange}
@@ -108,11 +113,12 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruFundingReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="funding_readiness"
                     value={value.funding_readiness}
                     onChange={onFieldChange}
@@ -123,8 +129,8 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruComments}
+                className={styles.inputSection}
             >
                 <TextArea
                     name="comment"
@@ -147,8 +153,7 @@ function EruInputItem(props: Props) {
                     error={error?.has_capacity_to_support}
                 />
             </InputSection>
-        </Container>
-
+        </InputSection>
     );
 }
 
diff --git a/app/src/views/EruReadinessForm/EruInputItem/styles.module.css b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
index 1882a30d9..ed68ee334 100644
--- a/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
+++ b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
@@ -1,13 +1,25 @@
-.eru-types {
+.eru-input-item {
     display: flex;
+    flex-direction: column;
 
-    .readiness-options {
+    .content {
         display: flex;
-        flex-direction: column;
+        gap: var(--go-ui-spacing-sm);
+        flex-wrap: wrap;
 
-        .readiness-list {
+        .input-section {
             display: flex;
             flex-direction: column;
+            flex-grow: 1;
+
+            .readiness-input {
+                display: flex;
+
+                .radio-list {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
         }
     }
 }
diff --git a/app/src/views/EruReadinessForm/i18n.json b/app/src/views/EruReadinessForm/i18n.json
index 210fe3131..7d783646b 100644
--- a/app/src/views/EruReadinessForm/i18n.json
+++ b/app/src/views/EruReadinessForm/i18n.json
@@ -3,15 +3,19 @@
     "strings": {
         "eruReadinessFormTitle": "Update ERU Readiness Form",
         "eruReadinessFormHeading": "ERU Deployment Readiness",
-        "eruReadinessFormDescription": "Complete the form with the ERU Readiness data of your National Society. In case of any questions.",
+        "eruReadinessFormDescription": "Complete the form with the ERU readiness data of your National Society. In case of any questions, contact: {imContact} or {surgeContact}.",
+        "imContact": "im@ifrc.org",
+        "surgeContact": "surge@ifrc.org",
         "eruCancelButton": "Cancel",
         "eruSaveAndCloseButton": "Save and Close",
-        "eruNationalSociety": "National Society",
-        "eruTypes": "Select ERU Type(s)",
-        "eruFormCreatedSuccessfully": "ERU Readiness Created Successfully",
-        "eruFormFailedToCreate": "Failed to create a ERU Readiness",
-        "eruFormSuccessfullyUpdated": "Successfully Updated ERU Readiness Form",
-        "eruFormFailedToUpdate": "Failed to Update ERU Readiness Form",
-        "eruNoRecord": "No Existing Record"
+        "eruSelectNationalSociety": "National Society",
+        "eruSelectErus": "Select ERU Type(s)",
+        "eruFormSuccessfullyUpdated": "Successfully updated ERU readiness",
+        "eruFormFailedToUpdate": "Failed to update ERU readiness",
+        "eruNoRecord": "No existing record",
+        "eruOwnerFailedToFetch": "Failed to fetch ERU owners!",
+        "eruReadinessFailedToFetch": "Failed to fetch ERU readiness information!",
+        "eruFormSuccessfullyCreated": "Successfully created ERU readiness",
+        "eruFormFailedToCreate": "Failed to create ERU readiness"
     }
 }
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
index cd73952aa..7991b6547 100644
--- a/app/src/views/EruReadinessForm/index.tsx
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -1,5 +1,6 @@
 import {
     useCallback,
+    useMemo,
     useState,
 } from 'react';
 import {
@@ -10,19 +11,25 @@ import {
     SelectInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { stringValueSelector } from '@ifrc-go/ui/utils';
 import {
+    injectClientId,
+    resolveToComponent,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
     isNotDefined,
     randomString,
 } from '@togglecorp/fujs';
 import {
     createSubmitHandler,
     getErrorObject,
-    type PartialForm,
     useForm,
     useFormArray,
 } from '@togglecorp/toggle-form';
 
+import Link from '#components/Link';
+import NonFieldError from '#components/NonFieldError';
 import Page from '#components/Page';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlertContext from '#hooks/useAlert';
@@ -35,8 +42,10 @@ import { transformObjectError } from '#utils/restRequest/error';
 
 import EruInputItem from './EruInputItem';
 import schema, {
-    type BaseFormType,
-    type EruReadinessBody,
+    type EruReadinessPatchBody,
+    type EruReadinessPostBody,
+    type FormType,
+    type PartialEruItem,
 } from './schema';
 
 import i18n from './i18n.json';
@@ -45,7 +54,7 @@ import styles from './styles.module.css';
 type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
 type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
 type EruOwnerOption = NonNullable<EruOwners['results']>[number];
-type EruTypeOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
 
 function eruOwnerKeySelector(option: EruOwnerOption) {
     return option.id;
@@ -54,9 +63,11 @@ function eruOwnerLabelSelector(option: EruOwnerOption) {
     return option.national_society_country_details.society_name ?? '';
 }
 
-const defaultFormValues: PartialForm<EruReadinessBody> = {};
+function eruTypeKeySelector(eruType: EruOption) {
+    return eruType.key;
+}
 
-const eruTypeKeySelector = (eruType: EruTypeOption) => eruType.key;
+const defaultFormValues: FormType = {};
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
@@ -65,7 +76,7 @@ export function Component() {
 
     const alert = useAlertContext();
     const {
-        deployments_eru_type,
+        deployments_eru_type: eruTypeOptions,
     } = useGlobalEnums();
 
     const {
@@ -82,20 +93,16 @@ export function Component() {
 
     const error = getErrorObject(formError);
 
-    const [eruId, setEruId] = useState<number | undefined>();
-
-    const [selectedEruTypeList, setSelectedEruTypeList] = useState<EruTypeOption['key'][] | undefined>();
-
-    const [selectedEruOwner, setSelectedEruOwner] = useState<EruOwnerOption['id']>();
+    const [eruReadinessId, setEruReadinessId] = useState<number | undefined>();
 
     const {
-        trigger: updateEruReadinessForm,
-        pending: updateEruReadinessFormPending,
+        trigger: updateEruReadiness,
+        pending: updateEruReadinessPending,
     } = useLazyRequest({
         url: '/api/v2/eru-readiness/{id}/',
         method: 'PATCH',
-        pathVariables: eruId !== undefined ? { id: Number(eruId) } : undefined,
-        body: (ctx: EruReadinessBody) => ctx,
+        pathVariables: eruReadinessId ? { id: Number(eruReadinessId) } : undefined,
+        body: (ctx: EruReadinessPatchBody) => ctx,
         onSuccess: () => {
             alert.show(
                 strings.eruFormSuccessfullyUpdated,
@@ -121,12 +128,51 @@ export function Component() {
         },
     });
 
+    const {
+        trigger: createEruReadiness,
+        pending: createEruReadinessPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/',
+        method: 'POST',
+        body: (ctx: EruReadinessPostBody) => ctx,
+        onSuccess: () => {
+            alert.show(
+                strings.eruFormSuccessfullyCreated,
+                { variant: 'success' },
+            );
+        },
+        onFailure: ({
+            value: {
+                messageForNotification,
+                formErrors,
+            },
+            debugMessage,
+        }) => {
+            setError(transformObjectError(formErrors, () => undefined));
+            alert.show(
+                strings.eruFormFailedToCreate,
+                {
+                    variant: 'danger',
+                    debugMessage,
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
     const {
         response: eruOwnerResponse,
         pending: eruOwnerPending,
     } = useRequest({
         url: '/api/v2/eru_owner/mini/',
         preserveResponse: true,
+        onFailure: () => {
+            alert.show(
+                strings.eruOwnerFailedToFetch,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
     });
 
     const {
@@ -135,215 +181,213 @@ export function Component() {
     } = useLazyRequest({
         url: '/api/v2/eru-readiness/',
         query: (eruOwnerId: number) => ({ eru_owner: eruOwnerId }),
+        preserveResponse: true,
         onSuccess: (response) => {
             const results = response?.results ?? [];
             if (results?.length > 0) {
                 const existingData = results[0];
-                setEruId(existingData.id);
+                setEruReadinessId(existingData.id);
                 setValue({
-                    ...existingData,
-                    eru_owner: existingData.eru_owner_details?.id,
-                    eru_types: existingData.eru_types?.map((eruType) => ({
-                        ...eruType,
-                        id: eruType.type,
+                    eru_owner: existingData.eru_owner_details.id,
+                    eru_types: existingData.eru_types.map((eruType) => ({
+                        ...injectClientId(eruType),
+                        id: eruType.id,
+                        type: eruType.type,
+                        equipment_readiness: eruType.equipment_readiness,
+                        people_readiness: eruType.people_readiness,
+                        funding_readiness: eruType.funding_readiness,
+                        comment: eruType.comment,
+                        has_capacity_to_lead: eruType.has_capacity_to_lead,
+                        has_capacity_to_support: eruType.has_capacity_to_support,
+                        client_id: randomString(),
                     })),
                 });
-                setSelectedEruTypeList(existingData.eru_types?.map((eruType) => eruType.type));
-                setSelectedEruOwner(existingData.eru_owner_details?.id);
             } else {
-                setEruId(undefined);
-                setValue({ ...defaultFormValues, eru_owner: undefined });
-                setSelectedEruTypeList(undefined);
-                setSelectedEruOwner(undefined);
+                setEruReadinessId(undefined);
+                setValue((oldValues) => ({
+                    ...oldValues,
+                    eru_types: undefined,
+                }));
             }
         },
+        onFailure: () => {
+            alert.show(
+                strings.eruReadinessFailedToFetch,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
     });
 
     const {
         setValue: onEruChange,
-    } = useFormArray('eru_types', setFieldValue);
-
-    const eruOwnerOption = eruOwnerResponse?.results;
-
-    const handleSubmit = useCallback((finalValue: BaseFormType) => {
-        setValue(finalValue);
-
-        if (isNotDefined(finalValue) || !finalValue.eru_owner) {
-            return;
-        }
+    } = useFormArray<'eru_types', PartialEruItem>(
+        'eru_types',
+        setFieldValue,
+    );
 
-        if (isNotDefined(eruId)) {
-            alert.show(
-                strings.eruNoRecord,
-                { variant: 'warning' },
-            );
-            return;
+    const handleSubmit = useCallback((formValues: FormType) => {
+        if (eruReadinessId) {
+            updateEruReadiness(formValues as EruReadinessPatchBody);
+        } else {
+            createEruReadiness(formValues as EruReadinessPostBody);
         }
+    }, [eruReadinessId, updateEruReadiness, createEruReadiness]);
 
-        const updatedEruTypes = (selectedEruTypeList || []).map((type) => {
-            const existingEru = finalValue.eru_types?.find((eruType) => eruType.type === type);
+    const handleFormSubmit = createSubmitHandler(validate, setError, handleSubmit);
 
-            return {
-                id: existingEru?.id ?? undefined,
-                type,
-                comment: existingEru?.comment ?? null,
-                equipment_readiness: existingEru?.equipment_readiness ?? 1,
-                people_readiness: existingEru?.people_readiness ?? 1,
-                funding_readiness: existingEru?.funding_readiness ?? 1,
-                has_capacity_to_lead: existingEru?.has_capacity_to_lead ?? false,
-                has_capacity_to_support: existingEru?.has_capacity_to_support ?? false,
-            };
-        });
+    const pending = updateEruReadinessPending
+        || eruOwnerPending
+        || fetchEruReadinessDataPending
+        || createEruReadinessPending;
 
-        const updatedFinalValue: EruReadinessBody = {
-            ...finalValue,
-            eru_types: updatedEruTypes,
-            eru_owner: finalValue.eru_owner,
-        };
-
-        updateEruReadinessForm(updatedFinalValue);
+    const handleCancel = useCallback(() => {
+        setValue(defaultFormValues);
     }, [
-        alert,
         setValue,
-        updateEruReadinessForm,
-        eruId,
-        selectedEruTypeList,
-        strings.eruNoRecord,
     ]);
 
-    const handleSave = useCallback(() => {
-        const handler = createSubmitHandler(
-            validate,
-            setError,
-            handleSubmit,
+    const handleSelectEru = useCallback((values: EruOption['key'][] | undefined) => {
+        const addedEruIdList = values?.filter(
+            (eruType) => !value.eru_types?.some(({ type }) => type === eruType),
         );
-        handler();
-    }, [
-        validate,
-        setError,
-        handleSubmit,
-    ]);
 
-    const disabled = updateEruReadinessFormPending
-        || eruOwnerPending || fetchEruReadinessDataPending;
+        const addedEruList: PartialEruItem[] | undefined = addedEruIdList
+            ?.map((a) => ({
+                client_id: randomString(),
+                type: a,
+            }));
 
-    const handleCancel = useCallback(() => {
-        setFieldValue([], 'eru_types');
-        setSelectedEruOwner(undefined);
-        setSelectedEruTypeList(undefined);
-    }, [
-        setFieldValue,
-    ]);
-
-    const handleSelectERUType = useCallback((values: EruTypeOption['key'][] | undefined) => {
-        setSelectedEruTypeList(values);
-
-        const existingEruTypeList = value.eru_types?.map((eruType) => eruType.id);
-        const addedEruTypeList = values?.filter((v) => !existingEruTypeList?.includes(v));
-        const removedEruTypeList = existingEruTypeList?.filter((v) => !values?.includes(v));
-
-        const addedEruTypeObjectList = addedEruTypeList?.map((a) => ({
-            clientId: randomString(),
-            id: a,
-            type: a,
-        }));
-
-        const newFieldValues = value.eru_types?.filter(
-            (fv) => !removedEruTypeList?.includes(fv.id),
+        const remainingEruList = value.eru_types?.filter(
+            (eru) => isDefined(eru.type) && values?.includes(eru.type),
         );
 
-        setFieldValue([...(newFieldValues ?? []), ...(addedEruTypeObjectList ?? [])], 'eru_types');
-    }, [value.eru_types, setFieldValue]);
+        setFieldValue([
+            ...(remainingEruList ?? []),
+            ...(addedEruList ?? []),
+        ], 'eru_types' as const);
+    }, [setFieldValue, value]);
 
     const handleEruOwnerChange = useCallback(
         (newValue: number | undefined) => {
-            setSelectedEruOwner(newValue);
-            setFieldValue(newValue, 'eru_owner');
-
-            if (newValue) {
-                setValue({});
+            setValue({
+                ...defaultFormValues,
+                eru_owner: newValue,
+            });
+            if (isDefined(newValue)) {
                 fetchEruReadinessData(newValue);
-            } else {
-                setValue({ ...defaultFormValues, eru_owner: undefined });
-                setSelectedEruTypeList(undefined);
             }
         },
-        [setFieldValue, fetchEruReadinessData, setValue],
+        [fetchEruReadinessData, setValue],
     );
 
+    const eruTypes = useMemo(() => (
+        value.eru_types?.map((eruType) => eruType.type).filter(isDefined)
+    ), [value.eru_types]);
+
     return (
         <Page
-            className={styles.updateForm}
             title={strings.eruReadinessFormTitle}
             heading={strings.eruReadinessFormHeading}
-            description={strings.eruReadinessFormDescription}
+            description={resolveToComponent(
+                strings.eruReadinessFormDescription,
+                {
+                    imContact: (
+                        <Link
+                            href="mailto:im@ifrc.org"
+                            external
+                            variant="tertiary"
+                        >
+                            {strings.imContact}
+                        </Link>
+                    ),
+                    surgeContact: (
+                        <Link
+                            href="mailto:surge@ifrc.org"
+                            external
+                            variant="tertiary"
+                        >
+                            {strings.imContact}
+                        </Link>
+                    ),
+                },
+            )}
             withBackgroundColorInMainSection
-            mainSectionClassName={styles.content}
+            mainSectionClassName={styles.mainSection}
             actions={(
                 <>
                     <Button
                         name={undefined}
                         onClick={handleCancel}
-                        variant="tertiary"
+                        variant="secondary"
                     >
                         {strings.eruCancelButton}
                     </Button>
                     <Button
                         name={undefined}
-                        onClick={handleSave}
-                        variant="secondary"
+                        onClick={handleFormSubmit}
+                        variant="primary"
                     >
                         {strings.eruSaveAndCloseButton}
                     </Button>
                 </>
             )}
         >
-            <Container>
+            <NonFieldError
+                error={formError}
+                withFallbackError
+            />
+            <Container
+                withFooterBorder
+                contentViewType="vertical"
+            >
                 <InputSection
-                    title={strings.eruNationalSociety}
+                    title={strings.eruSelectNationalSociety}
                     withAsteriskOnTitle
                 >
                     <SelectInput
                         name="eru_owner"
-                        options={eruOwnerOption}
+                        options={eruOwnerResponse?.results}
                         onChange={handleEruOwnerChange}
-                        value={selectedEruOwner}
+                        value={value.eru_owner}
                         keySelector={eruOwnerKeySelector}
                         labelSelector={eruOwnerLabelSelector}
                         error={error?.eru_owner}
-                        disabled={disabled}
+                        required
+                        disabled={pending}
                     />
                 </InputSection>
-            </Container>
-            <Container>
                 <InputSection
-                    title={strings.eruTypes}
+                    title={strings.eruSelectErus}
                 >
                     <MultiSelectInput
                         name="eru_types"
-                        options={deployments_eru_type}
-                        value={selectedEruTypeList}
+                        options={eruTypeOptions}
+                        value={eruTypes}
                         keySelector={eruTypeKeySelector}
                         labelSelector={stringValueSelector}
-                        onChange={handleSelectERUType}
-                        disabled={disabled}
+                        onChange={handleSelectEru}
+                        required
+                        disabled={pending || isNotDefined(value.eru_owner)}
                     />
                 </InputSection>
             </Container>
-            <div className={styles.eruTypeList}>
-                {value.eru_types?.map((eruType, index) => (
+            <Container
+                contentViewType="vertical"
+                pending={fetchEruReadinessDataPending}
+            >
+                <NonFieldError error={getErrorObject(error?.eru_types)} />
+                {value.eru_types?.map((eru, index) => (
                     <EruInputItem
-                        key={eruType.id}
+                        key={eru.client_id}
                         index={index}
-                        value={eruType}
+                        value={eru}
                         onChange={onEruChange}
-                        title={deployments_eru_type?.find(
-                            (type) => type.key === eruType.type,
-                        )?.value}
                         error={getErrorObject(error?.eru_types)}
                     />
                 ))}
-            </div>
+            </Container>
         </Page>
     );
 }
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
index 39d4379ff..a2fdb07d2 100644
--- a/app/src/views/EruReadinessForm/schema.ts
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -1,26 +1,36 @@
+import { type DeepReplace } from '@ifrc-go/ui/utils';
 import {
     type ArraySchema,
     type ObjectSchema,
     type PartialForm,
+    requiredListCondition,
+    undefinedValue,
 } from '@togglecorp/toggle-form';
 
 import { type GoApiBody } from '#utils/restRequest';
 
-export type EruReadinessBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
+export type EruReadinessPatchBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
+export type EruReadinessPostBody = GoApiBody<'/api/v2/eru-readiness/', 'POST'>;
+type RawEruItem = NonNullable<EruReadinessPatchBody['eru_types']>[number];
+export type EruItem = RawEruItem & { client_id: string }
 
-export type BaseFormType = PartialForm<EruReadinessBody>;
+type EruReadinessFormFields = DeepReplace<
+    EruReadinessPatchBody,
+    RawEruItem,
+    EruItem
+>;
 
-type FormSchema = ObjectSchema<BaseFormType>;
+export type FormType = PartialForm<EruReadinessFormFields, 'client_id'>;
+
+export type PartialEruItem = NonNullable<FormType['eru_types']>[number];
+
+export type FormSchema = ObjectSchema<FormType>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
-export type EruType = (NonNullable<NonNullable<EruReadinessBody['eru_types']>>[number]) & {
-    client_id: string;
-};
-export type EruTypesType = NonNullable<BaseFormType['eru_types']>[number];
 
-type EruTypeSchema = ObjectSchema<PartialForm<EruType>, BaseFormType>;
-type EruTypeSchemaFields = ReturnType<EruTypeSchema['fields']>;
-type EruTypesSchema = ArraySchema<PartialForm<EruType>, BaseFormType>;
-export type EruTypesSchemaMember = ReturnType<EruTypesSchema['member']>;
+type EruItemSchema = ObjectSchema<PartialForm<EruItem, 'client_id'>, FormType>;
+type EruItemSchemaFields = ReturnType<EruItemSchema['fields']>;
+type EruItemListSchema = ArraySchema<PartialForm<EruItem, 'client_id'>, FormType>;
+type EruItemListMemberSchema = ReturnType<EruItemListSchema['member']>;
 
 const schema: FormSchema = {
     fields: (): FormSchemaFields => ({
@@ -28,16 +38,19 @@ const schema: FormSchema = {
             required: true,
         },
         eru_types: {
+            required: true,
+            requiredValidation: requiredListCondition,
+            defaultValue: [],
             keySelector: (col) => col.client_id,
-            member: (): EruTypesSchemaMember => ({
-                fields: (): EruTypeSchemaFields => ({
-                    client_id: { },
-                    id: { defaultValue: undefined },
+            member: (): EruItemListMemberSchema => ({
+                fields: (): EruItemSchemaFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
                     type: { required: true },
                     equipment_readiness: { required: true },
                     people_readiness: { required: true },
                     funding_readiness: { required: true },
-                    comment: { },
+                    comment: {},
                     has_capacity_to_lead: { defaultValue: false },
                     has_capacity_to_support: { defaultValue: false },
                 }),
diff --git a/app/src/views/EruReadinessForm/styles.module.css b/app/src/views/EruReadinessForm/styles.module.css
index b4ea910ae..a757a61a5 100644
--- a/app/src/views/EruReadinessForm/styles.module.css
+++ b/app/src/views/EruReadinessForm/styles.module.css
@@ -1,13 +1,6 @@
-.update-form {
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-2xl);
-
-        .eru-type-list {
-            display: flex;
-            flex-direction: column;
-            gap: var(--go-ui-spacing-lg);
-        }
-    }
+.main-section {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--go-ui-spacing-sm);
 }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
index b9e17cc54..bddb9e9d9 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
@@ -10,7 +10,7 @@ import {
     SelectInput,
 } from '@ifrc-go/ui';
 import { numericKeySelector } from '@ifrc-go/ui/utils';
-import { isDefined } from '@togglecorp/fujs';
+import { isDefined, listToGroupList } from '@togglecorp/fujs';
 
 import Link from '#components/Link';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
@@ -30,7 +30,6 @@ type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
 type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
 type EruOwnerOption = NonNullable<EruOwners['results']>[number];
 type EruTypesOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
-type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
 
 function eruOwnerKeySelector(option: EruOwnerOption) {
     return option.id;
@@ -100,9 +99,18 @@ export function Component() {
         type: item.type,
         updatedAt: item.updated_at,
         societyName: item.society_name,
-        eruTypes: item.er
+        eruTypes: item.er,
     }), []);
 
+
+    console.warn('eruReadinessResponse', eruReadinessResponse);
+
+    const uniqueData = eruReadinessResponse?.results?.flatMap((r) => (
+        [...(r.eru_types.map((t) => ({ ...t, owner: r.eru_owner_details, updated: r.updated_at })))]
+    ));
+
+    console.warn('uniq', listToGroupList(uniqueData, (d) => d.type));
+
     const uniqueEruReadinessData = useMemo(() => {
         const eruTypeMap = new Map<
     number,

From 6c0a1b947efd64535e9582ba54273c0c59e28024 Mon Sep 17 00:00:00 2001
From: samshara <sameerai2736@gmail.com>
Date: Fri, 21 Mar 2025 15:54:25 +0545
Subject: [PATCH 4/4] feat: add eru capacity and readiness section

---
 app/src/App/routes/SurgeRoutes.tsx            |   6 +-
 app/src/views/EruReadinessForm/index.tsx      |  49 ++-
 app/src/views/EruReadinessForm/schema.ts      |   4 +-
 .../EmergencyResponseUnitCard}/i18n.json      |   0
 .../EmergencyResponseUnitCard/index.tsx       | 208 +++++++++++
 .../styles.module.css                         |  71 ++++
 .../NationalSocietyCard}/i18n.json            |   0
 .../NationalSocietyCard/index.tsx             | 149 ++++++++
 .../NationalSocietyCard/styles.module.css     |  49 +++
 .../EmergencyResponseUnitReadiness/index.tsx  | 217 ++++++++++++
 .../EmergencyResponseUnitTypeCard/index.tsx   | 212 -----------
 .../styles.module.css                         | 102 ------
 .../NationalSocietyTypeCard/index.tsx         | 119 -------
 .../NationalSocietyTypeCard/styles.module.css |  37 --
 .../EmergencyResponseUnit/index.tsx           | 332 +-----------------
 .../EmergencyResponseUnit/styles.module.css   |   7 -
 16 files changed, 735 insertions(+), 827 deletions(-)
 rename app/src/views/SurgeOverview/EmergencyResponseUnit/{EmergencyResponseUnitTypeCard => EmergencyResponseUnitReadiness/EmergencyResponseUnitCard}/i18n.json (100%)
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css
 rename app/src/views/SurgeOverview/EmergencyResponseUnit/{NationalSocietyTypeCard => EmergencyResponseUnitReadiness/NationalSocietyCard}/i18n.json (100%)
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
 delete mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
 delete mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
 delete mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
 delete mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
 delete mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css

diff --git a/app/src/App/routes/SurgeRoutes.tsx b/app/src/App/routes/SurgeRoutes.tsx
index 0af9f5e25..543a38b75 100644
--- a/app/src/App/routes/SurgeRoutes.tsx
+++ b/app/src/App/routes/SurgeRoutes.tsx
@@ -122,9 +122,9 @@ const emergencyResponseUnit = customWrapRoute({
     },
 });
 
-const updateERUReadinessForm = customWrapRoute({
+const eruReadinessForm = customWrapRoute({
     parent: rootLayout,
-    path: 'update-eru-readiness',
+    path: 'eru-readiness',
     component: {
         render: () => import('#views/EruReadinessForm'),
         props: {},
@@ -1630,5 +1630,5 @@ export default {
     activeSurgeDeployments,
     rapidResponsePersonnel,
     emergencyResponseUnit,
-    updateERUReadinessForm,
+    eruReadinessForm,
 };
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
index 7991b6547..f0e097cae 100644
--- a/app/src/views/EruReadinessForm/index.tsx
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -33,6 +33,7 @@ import NonFieldError from '#components/NonFieldError';
 import Page from '#components/Page';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlertContext from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
 import {
     type GoApiResponse,
     useLazyRequest,
@@ -55,6 +56,7 @@ type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
 type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
 type EruOwnerOption = NonNullable<EruOwners['results']>[number];
 type EruOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruResponse = GoApiResponse<'/api/v2/eru-readiness/{id}/'>;
 
 function eruOwnerKeySelector(option: EruOwnerOption) {
     return option.id;
@@ -74,6 +76,7 @@ const defaultFormValues: FormType = {};
 export function Component() {
     const strings = useTranslation(i18n);
 
+    const { goBack } = useRouting();
     const alert = useAlertContext();
     const {
         deployments_eru_type: eruTypeOptions,
@@ -95,6 +98,24 @@ export function Component() {
 
     const [eruReadinessId, setEruReadinessId] = useState<number | undefined>();
 
+    const patchEruFormValues = (response: EruResponse) => {
+        setEruReadinessId(response.id);
+        setValue({
+            eru_owner: response.eru_owner_details.id,
+            eru_types: response.eru_types.map((eruType) => ({
+                ...injectClientId(eruType),
+                id: eruType.id,
+                type: eruType.type,
+                equipment_readiness: eruType.equipment_readiness,
+                people_readiness: eruType.people_readiness,
+                funding_readiness: eruType.funding_readiness,
+                comment: eruType.comment,
+                has_capacity_to_lead: eruType.has_capacity_to_lead,
+                has_capacity_to_support: eruType.has_capacity_to_support,
+                client_id: randomString(),
+            })),
+        });
+    };
     const {
         trigger: updateEruReadiness,
         pending: updateEruReadinessPending,
@@ -103,11 +124,13 @@ export function Component() {
         method: 'PATCH',
         pathVariables: eruReadinessId ? { id: Number(eruReadinessId) } : undefined,
         body: (ctx: EruReadinessPatchBody) => ctx,
-        onSuccess: () => {
+        onSuccess: (response) => {
+            patchEruFormValues(response);
             alert.show(
                 strings.eruFormSuccessfullyUpdated,
                 { variant: 'success' },
             );
+            goBack();
         },
         onFailure: ({
             value: {
@@ -135,11 +158,13 @@ export function Component() {
         url: '/api/v2/eru-readiness/',
         method: 'POST',
         body: (ctx: EruReadinessPostBody) => ctx,
-        onSuccess: () => {
+        onSuccess: (response) => {
+            patchEruFormValues(response);
             alert.show(
                 strings.eruFormSuccessfullyCreated,
                 { variant: 'success' },
             );
+            goBack();
         },
         onFailure: ({
             value: {
@@ -185,23 +210,7 @@ export function Component() {
         onSuccess: (response) => {
             const results = response?.results ?? [];
             if (results?.length > 0) {
-                const existingData = results[0];
-                setEruReadinessId(existingData.id);
-                setValue({
-                    eru_owner: existingData.eru_owner_details.id,
-                    eru_types: existingData.eru_types.map((eruType) => ({
-                        ...injectClientId(eruType),
-                        id: eruType.id,
-                        type: eruType.type,
-                        equipment_readiness: eruType.equipment_readiness,
-                        people_readiness: eruType.people_readiness,
-                        funding_readiness: eruType.funding_readiness,
-                        comment: eruType.comment,
-                        has_capacity_to_lead: eruType.has_capacity_to_lead,
-                        has_capacity_to_support: eruType.has_capacity_to_support,
-                        client_id: randomString(),
-                    })),
-                });
+                patchEruFormValues(results[0]);
             } else {
                 setEruReadinessId(undefined);
                 setValue((oldValues) => ({
@@ -244,7 +253,9 @@ export function Component() {
 
     const handleCancel = useCallback(() => {
         setValue(defaultFormValues);
+        goBack();
     }, [
+        goBack,
         setValue,
     ]);
 
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
index a2fdb07d2..d0a5c2064 100644
--- a/app/src/views/EruReadinessForm/schema.ts
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -12,7 +12,7 @@ import { type GoApiBody } from '#utils/restRequest';
 export type EruReadinessPatchBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
 export type EruReadinessPostBody = GoApiBody<'/api/v2/eru-readiness/', 'POST'>;
 type RawEruItem = NonNullable<EruReadinessPatchBody['eru_types']>[number];
-export type EruItem = RawEruItem & { client_id: string }
+type EruItem = RawEruItem & { client_id: string }
 
 type EruReadinessFormFields = DeepReplace<
     EruReadinessPatchBody,
@@ -24,7 +24,7 @@ export type FormType = PartialForm<EruReadinessFormFields, 'client_id'>;
 
 export type PartialEruItem = NonNullable<FormType['eru_types']>[number];
 
-export type FormSchema = ObjectSchema<FormType>;
+type FormSchema = ObjectSchema<FormType>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
 
 type EruItemSchema = ObjectSchema<PartialForm<EruItem, 'client_id'>, FormType>;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
similarity index 100%
rename from app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/i18n.json
rename to app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
new file mode 100644
index 000000000..967703d37
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
@@ -0,0 +1,208 @@
+import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+function getReadinessColor(rank: number | undefined) {
+    if (rank === 1) return styles.greenIcon;
+    if (rank === 2) return styles.yellowIcon;
+    if (rank === 3) return styles.redIcon;
+    return styles.grayIcon;
+}
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+
+export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_types'][0] & {
+    eruOwner: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_owner_details'];
+    updatedAt: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['updated_at'];
+}>
+
+interface Props {
+    className?: string;
+    typeDisplay: string;
+    nationalSocieties: string;
+    fundingReadiness: number | undefined;
+    equipmentReadiness: number | undefined;
+    peopleReadiness: number | undefined;
+    updatedAt: number | undefined;
+    readinessList: ReadinessList;
+}
+
+function EmergencyResponseUnitTypeCard(props: Props) {
+    const {
+        className,
+        typeDisplay,
+        nationalSocieties,
+        fundingReadiness,
+        equipmentReadiness,
+        peopleReadiness,
+        updatedAt,
+        readinessList,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    return (
+        <Container
+            className={_cs(styles.emergencyResponseTypeCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            heading={typeDisplay}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={updatedAt}
+                    valueType="date"
+                />
+            )}
+            withFooterBorder
+            footerActions={(
+                <Button
+                    name={undefined}
+                    onClick={setShowReadinessInfoTrue}
+                    variant="tertiary"
+                    title="See readiness info"
+                >
+                    See readiness info
+                </Button>
+            )}
+            childrenContainerClassName={styles.content}
+        >
+            <Container
+                footerContentClassName={styles.readinessContent}
+                withFooterBorder
+                footerContent={(
+                    <>
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Equipment Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(equipmentReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="People Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(peopleReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Funding Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(fundingReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                    </>
+                )}
+            >
+                <TextOutput
+                    className={styles.eruOwners}
+                    label="National Society"
+                    value={nationalSocieties}
+                    strongValue
+                    withoutLabelColon
+                />
+            </Container>
+            {showReadinessInfo && (
+                <Modal
+                    className={styles.modal}
+                    heading={typeDisplay}
+                    headerDescription="Readiness Information by National Society"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                    size="md"
+                    contentViewType="vertical"
+                    spacing="comfortable"
+                >
+                    {readinessList?.map((readiness) => (
+                        <Container
+                            key={readiness.id}
+                            heading={
+                                readiness.eruOwner.national_society_country_details.society_name
+                            }
+                            headingLevel={5}
+                            withHeaderBorder
+                            childrenContainerClassName={styles.readinessContainer}
+                        >
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Equipment Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.equipment_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="People Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.people_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Funding Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.funding_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                        </Container>
+                    ))}
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default EmergencyResponseUnitTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css
new file mode 100644
index 000000000..62363f147
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css
@@ -0,0 +1,71 @@
+.emergency-response-type-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    .readiness-content {
+        display: flex;
+        flex-grow: 1;
+        padding-top: var(--go-ui-spacing-sm);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            flex: 1 0 0;
+            flex-direction: column-reverse;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.modal {
+    .readiness-container {
+        display: flex;
+        border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        padding-bottom: var(--go-ui-spacing-md);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            flex: 1 0 0;
+            flex-direction: column-reverse;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.separator-left {
+    flex-shrink: 0;
+    border-left: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.green-icon {
+    color: var(--go-ui-color-green);
+}
+
+.yellow-icon {
+    color: var(--go-ui-color-semantic-yellow);
+}
+
+.red-icon {
+    color: var(--go-ui-color-primary-red);
+}
+
+.gray-icon {
+    color: var(--go-ui-color-primary-gray);
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
similarity index 100%
rename from app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/i18n.json
rename to app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
new file mode 100644
index 000000000..215b5b5b4
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
@@ -0,0 +1,149 @@
+import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { joinStrings } from '#utils/common';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
+
+function getReadinessColor(rank: number | undefined) {
+    if (rank === 1) return styles.greenIcon;
+    if (rank === 2) return styles.yellowIcon;
+    if (rank === 3) return styles.redIcon;
+    return styles.grayIcon;
+}
+
+interface Props {
+    className?: string;
+    eruData: EruReadinessListItem;
+}
+
+function NationalSocietyTypeCard(props: Props) {
+    const {
+        className,
+        eruData,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    const eruTypes = joinStrings(eruData.eru_types.map((eruType) => eruType.type_display));
+
+    return (
+        <Container
+            className={_cs(styles.nationalSocietyTypeCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            withFooterBorder
+            heading={eruData.eru_owner_details.national_society_country_details.society_name}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={eruData.updated_at}
+                    valueType="date"
+                />
+            )}
+            footerActions={(
+                <Button
+                    name={undefined}
+                    onClick={setShowReadinessInfoTrue}
+                    variant="tertiary"
+                    title="Show Readiness Information"
+                >
+                    Show Readiness Information
+                </Button>
+            )}
+        >
+            <TextOutput
+                label="ERU Type(s)"
+                value={eruTypes}
+                strongValue
+                withoutLabelColon
+            />
+            {showReadinessInfo && (
+                <Modal
+                    className={styles.modal}
+                    heading={
+                        eruData.eru_owner_details.national_society_country_details.society_name
+                    }
+                    headerDescription="Readiness Information by ERU Type"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                    size="md"
+                    contentViewType="vertical"
+                    spacing="comfortable"
+                >
+                    {eruData.eru_types.map((eruType) => (
+                        <Container
+                            key={eruType.id}
+                            heading={eruType.type_display}
+                            headingLevel={5}
+                            withHeaderBorder
+                            childrenContainerClassName={styles.readinessContainer}
+                        >
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Equipment Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.equipment_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="People Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.people_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Funding EruType"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.funding_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                        </Container>
+                    ))}
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default NationalSocietyTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css
new file mode 100644
index 000000000..5220b086e
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css
@@ -0,0 +1,49 @@
+.national-society-type-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+}
+
+.modal {
+    .separator-left {
+        flex-shrink: 0;
+        border-left: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+    }
+
+    .readiness-container {
+        display: flex;
+        border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        padding-bottom: var(--go-ui-spacing-md);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            display: flex;
+            flex-direction: column-reverse;
+            flex-grow: 1;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.green-icon {
+    color: var(--go-ui-color-green);
+}
+
+.yellow-icon {
+    color: var(--go-ui-color-semantic-yellow);
+}
+
+.red-icon {
+    color: var(--go-ui-color-primary-red);
+}
+
+.gray-icon {
+    color: var(--go-ui-color-primary-gray);
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
new file mode 100644
index 000000000..5a780ddcf
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
@@ -0,0 +1,217 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    Grid,
+    SelectInput,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import {
+    maxSafe,
+    minSafe,
+    numericIdSelector,
+    stringKeySelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    listToGroupList,
+    mapToList,
+} from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useFilterState from '#hooks/useFilterState';
+import { joinStrings } from '#utils/common';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import EmergencyResponseUnitCard, { type ReadinessList } from './EmergencyResponseUnitCard';
+import NationalSocietyCard from './NationalSocietyCard';
+
+type EruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
+type EruOwnerOption = NonNullable<EruOwners['results']>[number];
+type EruTypeOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruReadiness = NonNullable<EruReadinessResponse['results']>[0];
+
+function eruOwnerKeySelector(option: EruOwnerOption) {
+    return option.id;
+}
+function eruOwnerLabelSelector(option: EruOwnerOption) {
+    return option.national_society_country_details.society_name ?? '';
+}
+const emergencyResponseUnitTypeKeySelector = (item: EruTypeOption) => item.key;
+const emergencyResponseUnitTypeLabelSelector = (item: EruTypeOption) => item.value ?? '?';
+
+function EmergencyResponseUnitReadiness() {
+    const {
+        rawFilter,
+        filtered,
+        filter,
+        setFilterField,
+    } = useFilterState<{
+        selectEruTypes? : EruTypeOption['key'],
+        selectEruOwner? : EruOwnerOption['id'],
+    }>({
+        filter: {},
+    });
+
+    const {
+        error: eruOwnersError,
+        response: eruOwnersResponse,
+        pending: eruOwnersPending,
+    } = useRequest({
+        url: '/api/v2/eru_owner/mini/',
+        preserveResponse: true,
+    });
+
+    const {
+        error: eruReadinessError,
+        response: eruReadinessResponse,
+        pending: eruReadinessPending,
+    } = useRequest({
+        url: '/api/v2/eru-readiness/',
+        preserveResponse: true,
+        query: {
+            eru_type: filter.selectEruTypes,
+            eru_owner: filter.selectEruOwner,
+        },
+    });
+
+    const {
+        deployments_eru_type: deploymentEruType,
+    } = useGlobalEnums();
+
+    const [activeTab, setActiveTab] = useState<'eruType' | 'nationalSociety'>('eruType');
+
+    const groupedByEruType = useMemo(() => {
+        const eruData = eruReadinessResponse?.results?.flatMap((readiness) => (
+            [...(readiness.eru_types.map((eruType) => (
+                {
+                    ...eruType,
+                    eruOwner: readiness.eru_owner_details,
+                    updatedAt: readiness.updated_at,
+                }
+            )))]
+        ));
+        return (
+            mapToList(
+                listToGroupList(
+                    eruData,
+                    (eru) => eru.type,
+                ),
+                (readinessList, eruType) => ({ key: eruType, readinessList }),
+            )
+        );
+    }, [eruReadinessResponse?.results]);
+
+    const eruRendererParams = useCallback((_: string, item: {
+        key: string;
+        readinessList: ReadinessList;
+    }) => ({
+        typeDisplay: item.readinessList[0].type_display,
+        nationalSocieties: joinStrings(
+            item.readinessList.map((v) => (
+                v.eruOwner.national_society_country_details.society_name
+            )).filter(isDefined),
+        ),
+        fundingReadiness: minSafe(item.readinessList.map((v) => v.funding_readiness)),
+        equipmentReadiness: minSafe(item.readinessList.map((v) => v.equipment_readiness)),
+        peopleReadiness: minSafe(item.readinessList.map((v) => v.people_readiness)),
+        updatedAt: maxSafe(item.readinessList.map((v) => (new Date(v.updatedAt).getTime()))),
+        readinessList: item.readinessList,
+    }), []);
+
+    const nsRendererParams = useCallback((_: number, item: EruReadiness) => ({
+        eruData: item,
+    }), []);
+
+    return (
+        <Tabs
+            onChange={setActiveTab}
+            value={activeTab}
+            variant="tertiary"
+        >
+            <Container
+                heading={`ERU Capacity and Readiness (${eruReadinessResponse?.count})`}
+                withHeaderBorder
+                actions={(
+                    <Link
+                        to="eruReadinessForm"
+                        variant="primary"
+                    >
+                        Update ERU Readiness
+                    </Link>
+                )}
+                contentViewType="vertical"
+                filters={(
+                    <>
+
+                        <SelectInput
+                            placeholder="National Society"
+                            name="selectEruOwner"
+                            options={eruOwnersResponse?.results}
+                            onChange={setFilterField}
+                            value={rawFilter.selectEruOwner}
+                            keySelector={eruOwnerKeySelector}
+                            labelSelector={eruOwnerLabelSelector}
+                            error={isDefined(eruOwnersError)}
+                            disabled={eruOwnersPending}
+                        />
+                        <SelectInput
+                            placeholder="ERU Type"
+                            name="selectEruTypes"
+                            value={rawFilter.selectEruTypes}
+                            onChange={setFilterField}
+                            keySelector={emergencyResponseUnitTypeKeySelector}
+                            labelSelector={emergencyResponseUnitTypeLabelSelector}
+                            options={deploymentEruType}
+                        />
+                    </>
+                )}
+                filterActions={(
+                    <TabList>
+                        <Tab name="eruType">ERU Type</Tab>
+                        <Tab name="nationalSociety">National Society</Tab>
+                    </TabList>
+                )}
+            >
+                <TabPanel name="eruType">
+                    <Grid
+                        numPreferredColumns={3}
+                        data={groupedByEruType}
+                        pending={eruReadinessPending}
+                        errored={isDefined(eruReadinessError)}
+                        filtered={filtered}
+                        keySelector={stringKeySelector}
+                        renderer={EmergencyResponseUnitCard}
+                        rendererParams={eruRendererParams}
+                    />
+                </TabPanel>
+                <TabPanel name="nationalSociety">
+                    <Grid
+                        numPreferredColumns={3}
+                        data={eruReadinessResponse?.results}
+                        pending={eruReadinessPending}
+                        errored={isDefined(eruReadinessError)}
+                        filtered={filtered}
+                        keySelector={numericIdSelector}
+                        renderer={NationalSocietyCard}
+                        rendererParams={nsRendererParams}
+                    />
+                </TabPanel>
+            </Container>
+        </Tabs>
+    );
+}
+
+export default EmergencyResponseUnitReadiness;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
deleted file mode 100644
index 67f2eb389..000000000
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/index.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { AlertCheckLineIcon } from '@ifrc-go/icons';
-import {
-    Button,
-    Container,
-    Heading,
-    Modal,
-    TextOutput,
-} from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
-import { _cs } from '@togglecorp/fujs';
-
-import { type GoApiResponse } from '#utils/restRequest';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
-type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
-
-interface NationalSociety {
-    name: string;
-    ns_funding_readiness: number;
-    ns_equipment_readiness: number;
-    ns_people_readiness: number;
-}
-
-interface Props {
-    className?: string;
-    typeDisplay: string;
-    nationalSocieties?: NationalSociety[];
-    fundingReadiness: number;
-    equipmentReadiness: number;
-    peopleReadiness: number;
-    updatedAt?: string;
-}
-
-function EmergencyResponseUnitTypeCard(props: Props) {
-    const {
-        className,
-        typeDisplay,
-        nationalSocieties,
-        fundingReadiness,
-        equipmentReadiness,
-        peopleReadiness,
-        updatedAt,
-    } = props;
-
-    const strings = useTranslation(i18n);
-
-    const [
-        showReadinessInfo,
-        {
-            setTrue: setShowReadinessInfoTrue,
-            setFalse: setShowReadinessInfoFalse,
-        },
-    ] = useBooleanState(false);
-
-    const getReadinessColor = (rank: number) => {
-        if (rank === 1) return styles.greenIcon;
-        if (rank === 2) return styles.yellowIcon;
-        return styles.redIcon;
-    };
-
-    const nationalSocietyList = nationalSocieties?.flatMap((society) => society?.name).join(', ');
-
-    return (
-        <Container
-            className={_cs(styles.emergencyResponseTypeCard, className)}
-            withInternalPadding
-            withHeaderBorder
-            spacing="default"
-            heading={typeDisplay}
-            headerDescription={(
-                <TextOutput
-                    className={styles.lastUpdated}
-                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
-                    value={updatedAt}
-                    valueType="date"
-                />
-            )}
-            footerContentClassName={styles.readinessList}
-            footerContent={(
-                <>
-                    <div className={styles.separator} />
-                    <div className={styles.figures}>
-                        <TextOutput
-                            className={styles.readiness}
-                            label="Equipment Readiness"
-                            value={(
-                                <AlertCheckLineIcon
-                                    className={`${styles.readinessIcon}
-                            ${getReadinessColor(equipmentReadiness)}`}
-                                />
-                            )}
-                            withoutLabelColon
-                        />
-                        <div className={styles.separatorLeft} />
-                        <TextOutput
-                            className={styles.readiness}
-                            label="People Readiness"
-                            value={(
-                                <AlertCheckLineIcon
-                                    className={`${styles.readinessIcon}
-                            ${getReadinessColor(peopleReadiness)}`}
-                                />
-                            )}
-                            withoutLabelColon
-                        />
-                        <div className={styles.separatorLeft} />
-                        <TextOutput
-                            className={styles.readiness}
-                            label="Funding Readiness"
-                            value={(
-                                <AlertCheckLineIcon
-                                    className={`${styles.readinessIcon}
-                            ${getReadinessColor(fundingReadiness)}`}
-                                />
-                            )}
-                            withoutLabelColon
-                        />
-                    </div>
-                    <div className={styles.separator} />
-                    <Button
-                        className={styles.showIcon}
-                        name={undefined}
-                        onClick={setShowReadinessInfoTrue}
-                        variant="tertiary"
-                        title="Show Readiness Information"
-                    >
-                        Show Readiness Information
-                    </Button>
-                </>
-            )}
-        >
-            <TextOutput
-                className={styles.eruOwners}
-                label="National Society"
-                value={nationalSocietyList}
-                strongValue
-                withoutLabelColon
-            />
-            {showReadinessInfo && (
-                <Modal
-                    modalContainerClassName={styles.modal}
-                    heading={typeDisplay}
-                    headingDescription="Readiness Information by National Society"
-                    onClose={setShowReadinessInfoFalse}
-                    withHeaderBorder
-                    size="sm"
-                    childrenContainerClassName={styles.societyList}
-                >
-                    {nationalSocieties?.map((society) => (
-                        <>
-                            <Heading
-                                level={5}
-                            >
-                                {society.name}
-                            </Heading>
-                            <div className={styles.separator} />
-                            <div className={styles.figures}>
-                                <TextOutput
-                                    className={styles.readiness}
-                                    label="Equipment Readiness"
-                                    value={(
-                                        <AlertCheckLineIcon
-                                            className={`${styles.readinessIcon}
-                                        ${getReadinessColor(society.ns_equipment_readiness)}`}
-                                        />
-                                    )}
-                                    valueClassName={styles.readinessIcon}
-                                    withoutLabelColon
-                                />
-                                <div className={styles.separatorLeft} />
-                                <TextOutput
-                                    className={styles.readiness}
-                                    label="People Readiness"
-                                    value={(
-                                        <AlertCheckLineIcon
-                                            className={`${styles.readinessIcon}
-                                        ${getReadinessColor(society.ns_people_readiness)}`}
-                                        />
-                                    )}
-                                    valueClassName={styles.readinessIcon}
-                                    withoutLabelColon
-                                />
-                                <div className={styles.separatorLeft} />
-                                <TextOutput
-                                    className={styles.readiness}
-                                    label="Funding Readiness"
-                                    value={(
-                                        <AlertCheckLineIcon
-                                            className={`${styles.readinessIcon}
-                                        ${getReadinessColor(society.ns_funding_readiness)}`}
-                                        />
-                                    )}
-                                    valueClassName={styles.readinessIcon}
-                                    withoutLabelColon
-                                />
-                            </div>
-                            <div className={styles.separator} />
-                        </>
-                    ))}
-                </Modal>
-            )}
-        </Container>
-    );
-}
-
-export default EmergencyResponseUnitTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
deleted file mode 100644
index 9aa39fc9a..000000000
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitTypeCard/styles.module.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.emergency-response-type-card {
-    border-radius: var(--go-ui-border-radius-lg);
-    box-shadow: var(--go-ui-box-shadow-md);
-
-    .last-updated {
-        color: var(--go-ui-color-text-light);
-    }
-
-    .figures {
-        display: flex;
-        gap: var(--go-ui-spacing-sm);
-        flex-grow: 1;
-
-        .readiness {
-            display: flex;
-            flex-direction: column-reverse;
-        }
-
-        .readiness-icon {
-            font-size: 1.7rem;
-        }
-
-        .green-icon {
-            color: var(--go-ui-color-green);
-        }
-
-        .yellow-icon {
-            color: var(--go-ui-color-semantic-yellow);
-        }
-
-        .red-icon {
-            color: var(--go-ui-color-primary-red);
-        }
-    }
-
-    .readiness-list {
-        display: flex;
-        flex-direction: column;
-
-        .separator {
-            flex-shrink: 0;
-            border-bottom: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-        }
-
-        .separator-left {
-            flex-shrink: 0;
-            border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-        }
-
-        .show-icon {
-            display: flex;
-            justify-content: flex-end;
-        }
-    }
-}
-.modal {
-    display: flex;
-    flex-direction: column;
-
-    .society-list {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-sm);
-    }
-
-    .separator {
-        flex-shrink: 0;
-        border-bottom: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-    }
-
-        .figures {
-            display: flex;
-            gap: var(--go-ui-spacing-sm);
-            flex-grow: 1;
-
-        .separator-left {
-            flex-shrink: 0;
-            border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-        }
-            .readiness {
-                display: flex;
-                flex-direction: column-reverse;
-                padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-md);
-            }
-
-            .readiness-icon {
-                font-size: 1.7rem;
-            }
-
-            .green-icon {
-                color: var(--go-ui-color-green);
-            }
-
-            .yellow-icon {
-                color: var(--go-ui-color-semantic-yellow);
-            }
-
-            .red-icon {
-                color: var(--go-ui-color-primary-red);
-            }
-        }
-    }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
deleted file mode 100644
index e24acbd0a..000000000
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { AlertCheckLineIcon } from '@ifrc-go/icons';
-import {
-    Button,
-    Container,
-    Heading,
-    Modal,
-    TextOutput,
-} from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
-import { _cs } from '@togglecorp/fujs';
-
-import { type GoApiResponse } from '#utils/restRequest';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
-type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
-type EruTypesList = NonNullable<EruReadinessListItem['eru_types']>[number];
-
-interface Props {
-    className?: string;
-    societyName? : string;
-    updatedAt?: string;
-    eruTypes?: EruReadinessListItem;
-}
-
-function NationalSocietyTypeCard(props: Props) {
-    const {
-        className,
-        societyName,
-        updatedAt,
-        eruTypes,
-    } = props;
-
-    const strings = useTranslation(i18n);
-
-    const [
-        showReadinessInfo,
-        {
-            setTrue: setShowReadinessInfoTrue,
-            setFalse: setShowReadinessInfoFalse,
-        },
-    ] = useBooleanState(false);
-
-    const eruTypesList = eruTypes?.eru_types?.map((i) => i.type).join(', ');
-
-    return (
-        <Container
-            className={_cs(styles.emergencyResponseUnitOwnerCard, className)}
-            withInternalPadding
-            withHeaderBorder
-            spacing="default"
-            heading={societyName}
-            headerDescription={(
-                <TextOutput
-                    className={styles.lastUpdated}
-                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
-                    value={updatedAt}
-                    valueType="date"
-                />
-            )}
-            // childrenContainerClassName={styles.figures}
-        >
-            <TextOutput
-                className={styles.lastUpdated}
-                label="ERU Types"
-                value={eruTypesList}
-                withoutLabelColon
-            />
-            <Button
-                name={undefined}
-                onClick={setShowReadinessInfoTrue}
-                variant="tertiary"
-                title="Show Readiness Information"
-            >
-                Show Readiness Information
-            </Button>
-            {showReadinessInfo && (
-                <Modal
-                    heading={societyName}
-                    headingDescription="Readiness Information by ERU Type"
-                    onClose={setShowReadinessInfoFalse}
-                    withHeaderBorder
-                >
-                    <Heading>
-                        {eruTypesList}
-                    </Heading>
-                    <TextOutput
-                        className={styles.lastUpdated}
-                        label="Equipment Readiness"
-                        value={<AlertCheckLineIcon />}
-                        valueClassName={styles.readinessIcon}
-                        withoutLabelColon
-                    />
-                    <TextOutput
-                        className={styles.lastUpdated}
-                        label="People Readiness"
-                        value={<AlertCheckLineIcon />}
-                        valueClassName={styles.readinessIcon}
-                        withoutLabelColon
-                    />
-                    <TextOutput
-                        className={styles.lastUpdated}
-                        label="Funding Readiness"
-                        value={<AlertCheckLineIcon />}
-                        valueClassName={styles.readinessIcon}
-                        withoutLabelColon
-                    />
-                </Modal>
-            )}
-        </Container>
-    );
-}
-
-export default NationalSocietyTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
deleted file mode 100644
index 5d31cea3a..000000000
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/NationalSocietyTypeCard/styles.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.emergency-response-unit-owner-card {
-    border-radius: var(--go-ui-border-radius-lg);
-    box-shadow: var(--go-ui-box-shadow-md);
-
-    .last-updated {
-        color: var(--go-ui-color-text-light);
-    }
-
-        .separator {
-            flex-shrink: 0;
-            border-top: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-        }
-
-        .readiness-icon {
-            height: 100%;
-        }
-
-        .figure {
-            flex-basis: 50%;
-
-            .content {
-                display: grid;
-                grid-template-columns: 6fr 1fr;
-                gap: var(--go-ui-spacing-xs);
-                align-content: flex-start;
-
-                .text-output {
-                    display: contents;
-                }
-
-                .label {
-                    line-height: var(--go-ui-line-height-xs);
-                    font-size: var(--go-ui-font-size-sm);
-                }
-            }
-        }
-}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
index bddb9e9d9..060a146bd 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
@@ -1,337 +1,17 @@
-import {
-    useCallback,
-    useMemo,
-    useState,
-} from 'react';
-import {
-    Button,
-    Container,
-    Grid,
-    SelectInput,
-} from '@ifrc-go/ui';
-import { numericKeySelector } from '@ifrc-go/ui/utils';
-import { isDefined, listToGroupList } from '@togglecorp/fujs';
-
-import Link from '#components/Link';
-import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import useFilterState from '#hooks/useFilterState';
-import {
-    type GoApiResponse,
-    useRequest,
-} from '#utils/restRequest';
-
-import EmergencyResponseUnitTypeCard from './EmergencyResponseUnitTypeCard';
-import NationalSocietyTypeCard from './NationalSocietyTypeCard';
-
-import styles from './styles.module.css';
-
-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
-type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
-type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
-type EruOwnerOption = NonNullable<EruOwners['results']>[number];
-type EruTypesOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
-
-function eruOwnerKeySelector(option: EruOwnerOption) {
-    return option.id;
-}
-function eruOwnerLabelSelector(option: EruOwnerOption) {
-    return option.national_society_country_details.society_name ?? '';
-}
-const emergencyResponseUnitTypeKeySelector = (item: EruTypesOption) => item.key;
-const emergencyResponseUnitTypeLabelSelector = (item: EruTypesOption) => item.value ?? '?';
+import { Container } from '@ifrc-go/ui';
 
+import OngoingERUDeployments from '../../ActiveSurgeDeployments/OngoingERUDeployments';
+import EmergencyResponseUnitReadiness from './EmergencyResponseUnitReadiness';
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const {
-        rawFilter,
-        filtered,
-        filter,
-        setFilterField,
-    } = useFilterState<{
-        selectEruTypes? : EruTypesOption['key'],
-        selectEruOwner? : EruOwnerOption['id'],
-    }>({
-        filter: {},
-    });
-
-    const {
-        error: eruOwnersError,
-        response: eruOwnersResponse,
-        pending: eruOwnersPending,
-    } = useRequest({
-        url: '/api/v2/eru_owner/mini/',
-        preserveResponse: true,
-    });
-
-    const {
-        error: eruReadinessError,
-        response: eruReadinessResponse,
-        pending: eruReadinessPending,
-    } = useRequest({
-        url: '/api/v2/eru-readiness/',
-        preserveResponse: true,
-        query: {
-            eru_type: filter.selectEruTypes,
-            eru_owner: filter.selectEruOwner,
-        },
-    });
-
-    const {
-        deployments_eru_type,
-    } = useGlobalEnums();
-
-    const [filterMode, setFilterMode] = useState<'eruType' | 'nationalSociety'>('nationalSociety');
-
-    const eruOwnersOption = eruOwnersResponse?.results;
-
-    const eruRendererParams = useCallback((_: number, item) => ({
-        type: item.type,
-        typeDisplay: item.type_display,
-        nationalSocieties: item.national_societies,
-        fundingReadiness: item.funding_readiness,
-        equipmentReadiness: item.equipment_readiness,
-        peopleReadiness: item.people_readiness,
-        updatedAt: item.updated_at,
-    }), []);
-
-    const nsRendererParams = useCallback((_: number, item) => ({
-        type: item.type,
-        updatedAt: item.updated_at,
-        societyName: item.society_name,
-        eruTypes: item.er,
-    }), []);
-
-
-    console.warn('eruReadinessResponse', eruReadinessResponse);
-
-    const uniqueData = eruReadinessResponse?.results?.flatMap((r) => (
-        [...(r.eru_types.map((t) => ({ ...t, owner: r.eru_owner_details, updated: r.updated_at })))]
-    ));
-
-    console.warn('uniq', listToGroupList(uniqueData, (d) => d.type));
-
-    const uniqueEruReadinessData = useMemo(() => {
-        const eruTypeMap = new Map<
-    number,
-    {
-      type: number;
-      type_display: string;
-      national_societies: {
-        name: string;
-        ns_funding_readiness: number;
-        ns_equipment_readiness: number;
-        ns_people_readiness: number;
-      }[];
-      funding_readiness: number;
-      equipment_readiness: number;
-      people_readiness: number;
-      updated_at: string;
-    }
-  >();
-
-        eruReadinessResponse?.results?.forEach((item) => {
-            item.eru_types.forEach((eruType) => {
-                if (!eruTypeMap.has(eruType.type)) {
-                    eruTypeMap.set(eruType.type, {
-                        type: eruType.type,
-                        type_display: eruType.type_display,
-                        national_societies: [],
-                        funding_readiness: Infinity,
-                        equipment_readiness: Infinity,
-                        people_readiness: Infinity,
-                        updated_at: item.updated_at,
-                    });
-                }
-
-                const entry = eruTypeMap.get(eruType.type)!;
-
-                entry.funding_readiness = Math.min(
-                    entry.funding_readiness,
-                    eruType.funding_readiness,
-                );
-                entry.equipment_readiness = Math.min(
-                    entry.equipment_readiness,
-                    eruType.equipment_readiness,
-                );
-                entry.people_readiness = Math.min(
-                    entry.people_readiness,
-                    eruType.people_readiness,
-                );
-
-                const nsName = item.eru_owner_details
-                    ?.national_society_country_details?.society_name;
-
-                if (nsName) {
-                    let nsEntry = entry.national_societies.find((ns) => ns.name === nsName);
-
-                    if (!nsEntry) {
-                        nsEntry = {
-                            name: nsName,
-                            ns_funding_readiness: eruType.funding_readiness,
-                            ns_equipment_readiness: eruType.equipment_readiness,
-                            ns_people_readiness: eruType.people_readiness,
-                        };
-                        entry.national_societies.push(nsEntry);
-                    } else {
-                        nsEntry.ns_funding_readiness = eruType.funding_readiness;
-                        nsEntry.ns_equipment_readiness = eruType.equipment_readiness;
-                        nsEntry.ns_people_readiness = eruType.people_readiness;
-                    }
-                }
-
-                if (new Date(item.updated_at) > new Date(entry.updated_at)) {
-                    entry.updated_at = item.updated_at;
-                }
-            });
-        });
-
-        return Array.from(eruTypeMap.values());
-    }, [eruReadinessResponse]);
-
-    const uniqueNationalSocietyData = useMemo(() => {
-        const societyMap = new Map<number, {
-        society_name: string | undefined | null;
-        eru_types: {
-            type: EruTypesOption;
-            readiness: {
-                equipment_readiness: number;
-                people_readiness: number;
-                funding_readiness: number;
-            };
-        }[];
-        latest_updated_at: string;
-    }>();
-
-        eruReadinessResponse?.results?.forEach((item) => {
-            item.eru_types.forEach((eruType) => {
-                const owner = item.eru_owner_details;
-
-                // If the societyMap does not have the owner yet, create a new entry
-                if (!societyMap.has(owner.id)) {
-                    societyMap.set(owner.id, {
-                        society_name: owner?.national_society_country_details?.society_name,
-                        eru_types: [
-                            {
-                                type: eruType, // Storing the entire eruType object
-                            },
-                        ],
-                        latest_updated_at: item.updated_at,
-                    });
-                } else {
-                    const entry = societyMap.get(owner.id);
-                    if (entry) {
-                    // Update the latest updated time if necessary
-                        entry.latest_updated_at = entry.latest_updated_at > item.updated_at
-                            ? entry.latest_updated_at
-                            : item.updated_at;
-
-                        // Check if the eru_type already exists, if not, add it
-                        const existingEruType = entry.eru_types.find(
-                            (typeEntry) => typeEntry.type.key === eruType.key,
-                        );
-                        if (!existingEruType) {
-                        // If not found, add new entry for this eru_type
-                            entry.eru_types.push({
-                                type: eruType,
-                                readiness: {
-                                    equipment_readiness: eruType.equipment_readiness,
-                                    people_readiness: eruType.people_readiness,
-                                    funding_readiness: eruType.funding_readiness,
-                                },
-                            });
-                        }
-                    }
-                }
-            });
-        });
-
-        return Array.from(societyMap.values());
-    }, [eruReadinessResponse]);
-
-    console.info('ns', uniqueNationalSocietyData);
-
     return (
         <Container
-            className={styles.emergencyResponseUnit}
-            heading="ERU Capacity and Readiness"
-            withHeaderBorder
-            actions={(
-                <Link
-                    to="updateERUReadinessForm"
-                    variant="primary"
-                >
-                    Update ERU Readiness
-                </Link>
-            )}
             contentViewType="vertical"
-            filterActions={(
-                <>
-                    <Button
-                        name={undefined}
-                        onClick={() => setFilterMode('eruType')}
-                        variant="tertiary"
-                    >
-                        ERU Type
-                    </Button>
-                    <div className={styles.separator} />
-                    <Button
-                        name={undefined}
-                        onClick={() => setFilterMode('nationalSociety')}
-                        variant="tertiary"
-                    >
-                        National Society Type
-                    </Button>
-                </>
-            )}
-            filters={(
-                <>
-
-                    <SelectInput
-                        placeholder="National Society"
-                        name="selectEruOwner"
-                        options={eruOwnersOption}
-                        onChange={setFilterField}
-                        value={rawFilter.selectEruOwner}
-                        keySelector={eruOwnerKeySelector}
-                        labelSelector={eruOwnerLabelSelector}
-                    />
-                    <SelectInput
-                        placeholder="ERU Type"
-                        name="selectEruTypes"
-                        value={rawFilter.selectEruTypes}
-                        onChange={setFilterField}
-                        keySelector={emergencyResponseUnitTypeKeySelector}
-                        labelSelector={emergencyResponseUnitTypeLabelSelector}
-                        options={deployments_eru_type}
-                    />
-                </>
-            )}
+            spacing="loose"
         >
-            {filterMode === 'eruType' && (
-                <Grid
-                    numPreferredColumns={3}
-                    data={uniqueEruReadinessData}
-                    pending={eruReadinessPending}
-                    errored={isDefined(eruReadinessError)}
-                    filtered={filtered}
-                    keySelector={numericKeySelector}
-                    renderer={EmergencyResponseUnitTypeCard}
-                    rendererParams={eruRendererParams}
-                />
-            )}
-            {filterMode === 'nationalSociety' && (
-                <Grid
-                    numPreferredColumns={3}
-                    data={uniqueNationalSocietyData}
-                    pending={eruOwnersPending}
-                    errored={isDefined(eruOwnersError)}
-                    filtered={filtered}
-                    keySelector={numericKeySelector}
-                    renderer={NationalSocietyTypeCard}
-                    rendererParams={nsRendererParams}
-                />
-            )}
+            <EmergencyResponseUnitReadiness />
+            <OngoingERUDeployments />
         </Container>
     );
 }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css
deleted file mode 100644
index a98b08205..000000000
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/styles.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.emergency-response-unit {
-    .separator {
-        flex-shrink: 0;
-        border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-        height: 1rem;
-    }
-}