From 5dd59da4d8397890bd36addbd1c2399892b069a1 Mon Sep 17 00:00:00 2001
From: Shreeyash Shrestha <shreeyash.shrestha@togglecorp.com>
Date: Wed, 11 Mar 2026 16:55:12 +0545
Subject: [PATCH 1/4] feat(surge-eru): update in eru surge page

- add options to select contribution type in update ERU form
- group list from ns contribution in readiness info modal
- filter national societies in ERU Type card to only which holds the ERU
---
 app/src/utils/constants.ts                    |   4 +
 .../EruReadinessForm/EruInputItem/index.tsx   | 109 ++++++++------
 app/src/views/EruReadinessForm/schema.ts      |   1 +
 .../EmergencyResponseUnitCard/i18n.json       |   8 +-
 .../EmergencyResponseUnitCard/index.tsx       | 134 +++++++++++-------
 .../EruReadinessList/index.tsx                |  45 ++++++
 .../NationalSocietyCard/i18n.json             |   8 +-
 .../NationalSocietyCard/index.tsx             | 101 ++++++++-----
 .../ReadinessIconList/i18n.json               |   8 ++
 .../ReadinessIconList/index.tsx               |  36 +++++
 .../EmergencyResponseUnitReadiness/index.tsx  |   9 +-
 11 files changed, 324 insertions(+), 139 deletions(-)
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/i18n.json
 create mode 100644 app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/index.tsx

diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index e35e2e9d77..4848debfa0 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -176,6 +176,10 @@ export const SURGE_ALERT_STATUS_OPEN = 0 satisfies SurgeAlertTypeEnum;
 export const SURGE_ALERT_STATUS_STOOD_DOWN = 1 satisfies SurgeAlertTypeEnum;
 export const SURGE_ALERT_STATUS_CLOSED = 2 satisfies SurgeAlertTypeEnum;
 
+type TypeOfNsContributionEnum = components<'read'>['schemas']['DeploymentsEruReadinessNsContributionEnumKey'];
+export const NS_CONTRIBUTION_HOLDS_ERU = 1 satisfies TypeOfNsContributionEnum;
+export const NS_CONTRIBUTION_SUPPORTS_ERU = 2 satisfies TypeOfNsContributionEnum;
+
 export const NUM_X_AXIS_TICKS_MIN = 3;
 export const NUM_X_AXIS_TICKS_MAX = 12;
 
diff --git a/app/src/views/EruReadinessForm/EruInputItem/index.tsx b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
index 6c8cbdfbba..4a95f95ba7 100644
--- a/app/src/views/EruReadinessForm/EruInputItem/index.tsx
+++ b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 import {
     InputSection,
+    ListView,
     RadioInput,
     TextArea,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
 import { randomString } from '@togglecorp/fujs';
 import {
     type ArrayError,
@@ -19,18 +21,17 @@ import { type GoApiResponse } from '#utils/restRequest';
 import { type PartialEruItem } 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];
+type ContributionOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_ns_contribution']>[number];
 
 function readinessKeySelector(option: ReadinessOption) {
     return option.key;
 }
-
-function readinessLabelSelector(option: ReadinessOption) {
-    return option.value;
+function contributionKeySelector(option: ContributionOption) {
+    return option.key;
 }
 
 const defaultCollectionValue: PartialEruItem = {
@@ -57,6 +58,7 @@ function EruInputItem(props: Props) {
     const {
         deployments_eru_type: eruTypeOptions,
         deployments_eru_readiness_status,
+        deployments_eru_readiness_ns_contribution: nsContributionOptions,
     } = useGlobalEnums();
 
     const onFieldChange = useFormObject(
@@ -76,50 +78,65 @@ function EruInputItem(props: Props) {
     return (
         <InputSection
             title={title}
-            numPreferredColumns={4}
+            numPreferredColumns={2}
             withFullWidthContent
         >
-            <RadioInput
-                label={strings.eruEquipmentReadiness}
-                name="equipment_readiness"
-                value={value.equipment_readiness}
-                onChange={onFieldChange}
-                options={deployments_eru_readiness_status}
-                keySelector={readinessKeySelector}
-                labelSelector={readinessLabelSelector}
-                error={error?.equipment_readiness}
-                radioListLayout="block"
-            />
-            <RadioInput
-                label={strings.eruPeopleReadiness}
-                name="people_readiness"
-                value={value.people_readiness}
-                onChange={onFieldChange}
-                options={deployments_eru_readiness_status}
-                keySelector={readinessKeySelector}
-                labelSelector={readinessLabelSelector}
-                error={error?.people_readiness}
-                radioListLayout="block"
-            />
-            <RadioInput
-                label={strings.eruFundingReadiness}
-                name="funding_readiness"
-                value={value.funding_readiness}
-                onChange={onFieldChange}
-                options={deployments_eru_readiness_status}
-                keySelector={readinessKeySelector}
-                labelSelector={readinessLabelSelector}
-                error={error?.funding_readiness}
-                radioListLayout="block"
-            />
-            <TextArea
-                className={styles.commentInput}
-                label={strings.eruComments}
-                name="comment"
-                value={value?.comment}
-                onChange={onFieldChange}
-                error={error?.comment}
-            />
+            <ListView>
+                <RadioInput
+                    label={strings.eruEquipmentReadiness}
+                    name="equipment_readiness"
+                    value={value.equipment_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={stringValueSelector}
+                    error={error?.equipment_readiness}
+                    radioListLayout="block"
+                />
+                <RadioInput
+                    label={strings.eruPeopleReadiness}
+                    name="people_readiness"
+                    value={value.people_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={stringValueSelector}
+                    error={error?.people_readiness}
+                    radioListLayout="block"
+                />
+                <RadioInput
+                    label={strings.eruFundingReadiness}
+                    name="funding_readiness"
+                    value={value.funding_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={stringValueSelector}
+                    error={error?.funding_readiness}
+                    radioListLayout="block"
+                />
+            </ListView>
+            <ListView
+                layout="block"
+            >
+                <TextArea
+                    label={strings.eruComments}
+                    name="comment"
+                    value={value?.comment}
+                    onChange={onFieldChange}
+                    error={error?.comment}
+                />
+                <RadioInput
+                    name="ns_contribution"
+                    value={value?.ns_contribution}
+                    onChange={onFieldChange}
+                    options={nsContributionOptions}
+                    keySelector={contributionKeySelector}
+                    labelSelector={stringValueSelector}
+                    error={error?.ns_contribution}
+                    radioListLayout="block"
+                />
+            </ListView>
         </InputSection>
     );
 }
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
index 043fb98d58..f118073b2c 100644
--- a/app/src/views/EruReadinessForm/schema.ts
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -59,6 +59,7 @@ const schema: FormSchema = {
                     equipment_readiness: { required: true },
                     people_readiness: { required: true },
                     funding_readiness: { required: true },
+                    ns_contribution: { required: true },
                     comment: {},
                 }),
             }),
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
index 1b337d4565..4b1ff90e37 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
@@ -4,9 +4,9 @@
         "emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
         "emergencyResponseUnitNationalSociety": "National Society",
         "eruSeeReadinessInfoButton": "See readiness info",
-        "eruEquipmentReadiness": "Equipment",
-        "eruPeopleReadiness": "People",
-        "eruFundingReadiness": "Funding",
-        "eruReadinessInformationHeading": "Readiness Information by National Society"
+        "eruReadinessInformationHeading": "Readiness Information by National Society",
+        "eruReadinessNoData": "Data not available",
+        "eruHoldingERUTitle": "NS Holding this ERU",
+        "eruSupportERUTitle": "NS Supporting this ERU"
     }
 }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
index 5f16aa5404..3ef314d7a9 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import {
     Button,
     Container,
@@ -9,18 +10,28 @@ import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+    listToGroupList,
+} from '@togglecorp/fujs';
 
+import {
+    NS_CONTRIBUTION_HOLDS_ERU,
+    NS_CONTRIBUTION_SUPPORTS_ERU,
+} from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
-import ReadinessIcon from '../ReadinessIcon';
+import EruReadinessList from '../EruReadinessList';
+import ReadinessIconList from '../ReadinessIconList';
 
 import i18n from './i18n.json';
 
-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
+type EruReadinessTypeResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
 
-export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]> & {
-    eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];
-    updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];
+export type ReadinessList = Array<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]> & {
+    eruOwner: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['eru_owner_details'];
+    updatedAt: NonNullable<NonNullable<NonNullable<EruReadinessTypeResponse['results']>[number]>['eru_readiness']>[number]['updated_at'];
 }>
 
 interface Props {
@@ -48,6 +59,13 @@ function EmergencyResponseUnitTypeCard(props: Props) {
 
     const strings = useTranslation(i18n);
 
+    const groupedByNsContribution = useMemo(() => (
+        listToGroupList(
+            readinessList,
+            (eru) => eru.ns_contribution,
+        )
+    ), [readinessList]);
+
     const [
         showReadinessInfo,
         {
@@ -96,17 +114,10 @@ function EmergencyResponseUnitTypeCard(props: Props) {
                     numPreferredGridColumns={3}
                     minGridColumnSize="6rem"
                 >
-                    <ReadinessIcon
-                        readinessType={equipmentReadiness}
-                        label={strings.eruEquipmentReadiness}
-                    />
-                    <ReadinessIcon
-                        readinessType={peopleReadiness}
-                        label={strings.eruPeopleReadiness}
-                    />
-                    <ReadinessIcon
-                        readinessType={fundingReadiness}
-                        label={strings.eruFundingReadiness}
+                    <ReadinessIconList
+                        fundingReadiness={fundingReadiness}
+                        equipmentReadiness={equipmentReadiness}
+                        peopleReadiness={peopleReadiness}
                     />
                 </ListView>
             </ListView>
@@ -118,41 +129,64 @@ function EmergencyResponseUnitTypeCard(props: Props) {
                     size="md"
                     withoutSpacingOpticalCorrection
                 >
-                    <ListView
-                        layout="block"
-                        spacing="2xs"
-                    >
-                        {readinessList?.map((readiness) => (
-                            <Container
-                                key={readiness.id}
-                                heading={
-                                    readiness.eruOwner.national_society_country_details.society_name
-                                }
-                                headingLevel={5}
-                                withDarkBackground
-                                withPadding
-                            >
-                                <ListView
-                                    layout="grid"
-                                    numPreferredGridColumns={3}
-                                    minGridColumnSize="6rem"
+                    {isNotDefined(groupedByNsContribution)
+                        && (strings.eruReadinessNoData)}
+                    {isDefined(groupedByNsContribution) && (
+                        <ListView
+                            layout="block"
+                        >
+                            {isDefined(groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]) && (
+                                <Container
+                                    headingLevel={5}
+                                    heading={strings.eruHoldingERUTitle}
+                                >
+                                    <ListView
+                                        layout="block"
+                                        spacing="2xs"
+                                    >
+                                        {groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]
+                                            ?.map((readiness) => (
+                                                <EruReadinessList
+                                                    key={readiness.id}
+                                                    heading={readiness.eruOwner
+                                                        .national_society_country_details
+                                                        .society_name}
+                                                    fundingReadiness={readiness.funding_readiness}
+                                                    equipmentReadiness={readiness
+                                                        .equipment_readiness}
+                                                    peopleReadiness={readiness.people_readiness}
+                                                />
+                                            ))}
+                                    </ListView>
+                                </Container>
+                            )}
+                            {isDefined(groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]) && (
+                                <Container
+                                    headingLevel={5}
+                                    heading={strings.eruSupportERUTitle}
                                 >
-                                    <ReadinessIcon
-                                        readinessType={readiness.equipment_readiness}
-                                        label={strings.eruEquipmentReadiness}
-                                    />
-                                    <ReadinessIcon
-                                        readinessType={readiness.people_readiness}
-                                        label={strings.eruPeopleReadiness}
-                                    />
-                                    <ReadinessIcon
-                                        readinessType={readiness.funding_readiness}
-                                        label={strings.eruFundingReadiness}
-                                    />
-                                </ListView>
-                            </Container>
-                        ))}
-                    </ListView>
+                                    <ListView
+                                        layout="block"
+                                        spacing="2xs"
+                                    >
+                                        {groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]
+                                            ?.map((readiness) => (
+                                                <EruReadinessList
+                                                    key={readiness.id}
+                                                    heading={readiness.eruOwner
+                                                        .national_society_country_details
+                                                        .society_name}
+                                                    fundingReadiness={readiness.funding_readiness}
+                                                    equipmentReadiness={readiness
+                                                        .equipment_readiness}
+                                                    peopleReadiness={readiness.people_readiness}
+                                                />
+                                            ))}
+                                    </ListView>
+                                </Container>
+                            )}
+                        </ListView>
+                    )}
                 </Modal>
             )}
         </Container>
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
new file mode 100644
index 0000000000..bfed90724e
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EruReadinessList/index.tsx
@@ -0,0 +1,45 @@
+import {
+    Container,
+    ListView,
+} from '@ifrc-go/ui';
+
+import ReadinessIconList from '../ReadinessIconList';
+
+interface Props {
+    heading?: React.ReactNode;
+    fundingReadiness: number | undefined;
+    equipmentReadiness: number | undefined;
+    peopleReadiness: number | undefined;
+}
+
+function EruReadinessList(props: Props) {
+    const {
+        heading,
+        fundingReadiness,
+        equipmentReadiness,
+        peopleReadiness,
+    } = props;
+
+    return (
+        <Container
+            heading={heading}
+            headingLevel={6}
+            withDarkBackground
+            withPadding
+        >
+            <ListView
+                layout="grid"
+                minGridColumnSize="6rem"
+                numPreferredGridColumns={3}
+            >
+                <ReadinessIconList
+                    fundingReadiness={fundingReadiness}
+                    equipmentReadiness={equipmentReadiness}
+                    peopleReadiness={peopleReadiness}
+                />
+            </ListView>
+        </Container>
+    );
+}
+
+export default EruReadinessList;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
index 048697e8b5..830433f295 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
@@ -4,9 +4,9 @@
         "emergencyResponseUnitOwnerNSCardLastUpdated": "Last updated",
         "eruNSSeeReadinessInfoButton": "See readiness info",
         "eruTypesLabel": "ERU Type(s)",
-        "eruNSEquipmentReadiness": "Equipment",
-        "eruNSPeopleReadiness": "People",
-        "eruNSFundingReadiness": "Funding",
-        "eruNSReadinessInformationHeading": "Readiness Information by ERU Type"
+        "nationalReadinessNoData": "Data not available",
+        "eruNSReadinessInformationHeading": "Readiness Information by ERU Type",
+        "emergencyHoldingERUTitle": "NS Holding the ERU",
+        "emergencySupportERUTitle": "NS Supporting the ERU"
     }
 }
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
index b47b184426..898dc72325 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import {
     Button,
     Container,
@@ -9,11 +10,20 @@ import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+    listToGroupList,
+} from '@togglecorp/fujs';
 
 import { joinStrings } from '#utils/common';
+import {
+    NS_CONTRIBUTION_HOLDS_ERU,
+    NS_CONTRIBUTION_SUPPORTS_ERU,
+} from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
-import ReadinessIcon from '../ReadinessIcon';
+import EruReadinessList from '../EruReadinessList';
 
 import i18n from './i18n.json';
 
@@ -25,7 +35,7 @@ interface Props {
     eruData: EruReadinessListItem;
 }
 
-function NationalSocietyTypeCard(props: Props) {
+function NationalSocietyCard(props: Props) {
     const {
         className,
         eruData,
@@ -43,6 +53,13 @@ function NationalSocietyTypeCard(props: Props) {
 
     const eruTypes = joinStrings(eruData.eru_types.map((eruType) => eruType.type_display));
 
+    const groupedByNsContribution = useMemo(() => (
+        listToGroupList(
+            eruData.eru_types,
+            (eru) => eru.ns_contribution,
+        )
+    ), [eruData]);
+
     return (
         <Container
             className={className}
@@ -87,40 +104,60 @@ function NationalSocietyTypeCard(props: Props) {
                     withContentWell
                     withoutSpacingOpticalCorrection
                 >
-                    <ListView layout="block">
-                        {eruData.eru_types.map((eruType) => (
-                            <Container
-                                key={eruType.id}
-                                heading={eruType.type_display}
-                                headingLevel={5}
-                                withBackground
-                                withPadding
-                            >
-                                <ListView
-                                    layout="grid"
-                                    minGridColumnSize="10rem"
-                                    numPreferredGridColumns={3}
+                    {isNotDefined(groupedByNsContribution)
+                        && (strings.nationalReadinessNoData)}
+                    {isDefined(groupedByNsContribution) && (
+                        <ListView layout="block">
+                            {isDefined(groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]) && (
+                                <Container
+                                    headingLevel={5}
+                                    heading={strings.emergencyHoldingERUTitle}
+                                >
+                                    <ListView
+                                        layout="block"
+                                        spacing="2xs"
+                                    >
+                                        {groupedByNsContribution[NS_CONTRIBUTION_HOLDS_ERU]
+                                            ?.map((eruType) => (
+                                                <EruReadinessList
+                                                    key={eruType.id}
+                                                    heading={eruType.type_display}
+                                                    fundingReadiness={eruType.funding_readiness}
+                                                    equipmentReadiness={eruType.equipment_readiness}
+                                                    peopleReadiness={eruType.people_readiness}
+                                                />
+                                            ))}
+                                    </ListView>
+                                </Container>
+                            )}
+                            {isDefined(groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]) && (
+                                <Container
+                                    headingLevel={5}
+                                    heading={strings.emergencySupportERUTitle}
                                 >
-                                    <ReadinessIcon
-                                        readinessType={eruType.equipment_readiness}
-                                        label={strings.eruNSEquipmentReadiness}
-                                    />
-                                    <ReadinessIcon
-                                        readinessType={eruType.people_readiness}
-                                        label={strings.eruNSPeopleReadiness}
-                                    />
-                                    <ReadinessIcon
-                                        readinessType={eruType.funding_readiness}
-                                        label={strings.eruNSFundingReadiness}
-                                    />
-                                </ListView>
-                            </Container>
-                        ))}
-                    </ListView>
+                                    <ListView
+                                        layout="block"
+                                        spacing="2xs"
+                                    >
+                                        {groupedByNsContribution[NS_CONTRIBUTION_SUPPORTS_ERU]
+                                            ?.map((eruType) => (
+                                                <EruReadinessList
+                                                    key={eruType.id}
+                                                    heading={eruType.type_display}
+                                                    fundingReadiness={eruType.funding_readiness}
+                                                    equipmentReadiness={eruType.equipment_readiness}
+                                                    peopleReadiness={eruType.people_readiness}
+                                                />
+                                            ))}
+                                    </ListView>
+                                </Container>
+                            )}
+                        </ListView>
+                    )}
                 </Modal>
             )}
         </Container>
     );
 }
 
-export default NationalSocietyTypeCard;
+export default NationalSocietyCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/i18n.json
new file mode 100644
index 0000000000..477806bd00
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "surgeOverview",
+    "strings": {
+        "equipmentReadiness": "Equipment",
+        "peopleReadiness": "People",
+        "fundingReadiness": "Funding"
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/index.tsx
new file mode 100644
index 0000000000..dd5645c9ef
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIconList/index.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import ReadinessIcon from '../ReadinessIcon';
+
+import i18n from './i18n.json';
+
+interface Props {
+    fundingReadiness: number | undefined;
+    equipmentReadiness: number | undefined;
+    peopleReadiness: number | undefined;
+}
+
+function ReadinessIconList(props: Props) {
+    const { fundingReadiness, equipmentReadiness, peopleReadiness } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <>
+            <ReadinessIcon
+                readinessType={equipmentReadiness}
+                label={strings.equipmentReadiness}
+            />
+            <ReadinessIcon
+                readinessType={peopleReadiness}
+                label={strings.peopleReadiness}
+            />
+            <ReadinessIcon
+                readinessType={fundingReadiness}
+                label={strings.fundingReadiness}
+            />
+        </>
+    );
+}
+
+export default ReadinessIconList;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
index ba8f533de5..1e2be51268 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
@@ -36,6 +36,7 @@ import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlert from '#hooks/useAlert';
 import useFilterState from '#hooks/useFilterState';
 import { joinStrings } from '#utils/common';
+import { NS_CONTRIBUTION_HOLDS_ERU } from '#utils/constants';
 import { resolveUrl } from '#utils/resolveUrl';
 import {
     type GoApiResponse,
@@ -161,9 +162,11 @@ function EmergencyResponseUnitReadiness() {
         updatedAt: number | undefined;
     }) => ({
         typeDisplay: item.readinessList[0]!.type_display,
-        nationalSocieties: joinStrings(unique(item.readinessList.map((v) => (
-            v.eruOwner.national_society_country_details.society_name
-        ))).filter(isDefined)),
+        nationalSocieties: joinStrings(unique(
+            item.readinessList
+                .filter((v) => v.ns_contribution === NS_CONTRIBUTION_HOLDS_ERU)
+                .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)),

From 2b9eae7707f828fc2437b7b9aadbb743337d7b00 Mon Sep 17 00:00:00 2001
From: Shreeyash Shrestha <shreeyash.shrestha@togglecorp.com>
Date: Fri, 13 Mar 2026 09:59:57 +0545
Subject: [PATCH 2/4] feat(active-operation): update active operation map

- Create new component for active operation map Container
- Add tabs for crisis categorization and appeals type map
- Add new base point layer for crisis categorization
- add filter for event and needs_confirmation for appeal response
---
 .../OperationMapContainer/i18n.json           |  11 +
 .../OperationMapContainer/index.tsx           | 346 +++++++++++
 .../domain/ActiveOperationMap/i18n.json       |  18 +-
 .../domain/ActiveOperationMap/index.tsx       | 571 ++++++------------
 .../domain/ActiveOperationMap/utils.ts        |  58 +-
 .../components/domain/AppealsTable/index.tsx  |   4 +
 app/src/utils/constants.ts                    |   1 +
 app/src/views/EmergencyDetails/i18n.json      |   2 +-
 app/src/views/EmergencyDetails/index.tsx      |   2 +-
 go-api                                        |   2 +-
 10 files changed, 615 insertions(+), 400 deletions(-)
 create mode 100644 app/src/components/domain/ActiveOperationMap/OperationMapContainer/i18n.json
 create mode 100644 app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx

diff --git a/app/src/components/domain/ActiveOperationMap/OperationMapContainer/i18n.json b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/i18n.json
new file mode 100644
index 0000000000..50c154337d
--- /dev/null
+++ b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "activeOperationMap",
+    "strings": {
+        "operationPopoverPeopleAffected": "People Targeted",
+        "operationPopoverAmountRequested": "Amount Requested (CHF)",
+        "operationPopoverAmountFunded": "Amount Funded (CHF)",
+        "operationPopoverEmpty": "No Current Operations",
+        "explanationBubbleScalePoints": "Scale points by",
+        "lastUpdateLabel": "Last update"
+    }
+}
diff --git a/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx
new file mode 100644
index 0000000000..59a7f55eed
--- /dev/null
+++ b/app/src/components/domain/ActiveOperationMap/OperationMapContainer/index.tsx
@@ -0,0 +1,346 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    LegendItem,
+    ListView,
+    RadioInput,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { sumSafe } from '@ifrc-go/ui/utils';
+import {
+    compareNumber,
+    isDefined,
+    isNotDefined,
+    listToGroupList,
+    mapToMap,
+    unique,
+} from '@togglecorp/fujs';
+import {
+    MapBounds,
+    MapLayer,
+    MapSource,
+} from '@togglecorp/re-map';
+import { type LngLatBoundsLike } from 'mapbox-gl';
+
+import GoMapContainer from '#components/GoMapContainer';
+import Link from '#components/Link';
+import MapPopup from '#components/MapPopup';
+import useCountryRaw from '#hooks/domain/useCountryRaw';
+import useInputState from '#hooks/useInputState';
+import {
+    DEFAULT_MAP_PADDING,
+    DURATION_MAP_ZOOM,
+} from '#utils/constants';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import GlobalMap, { type AdminZeroFeatureProperties } from '../../GlobalMap';
+import {
+    APPEAL_TYPE_MULTIPLE,
+    basePointLayerOptions,
+    optionKeySelector,
+    optionLabelSelector,
+    outerCircleLayerOptionsForFinancialRequirements,
+    outerCircleLayerOptionsForPeopleTargeted,
+    type ScaleOption,
+    severityOrderMapping,
+} from '../utils';
+
+import i18n from './i18n.json';
+
+type AppealResponse = GoApiResponse<'/api/v2/appeal/'>;
+
+const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
+    type: 'geojson',
+};
+
+type LegendOptions = {
+    value: number;
+    label: string;
+    color: string;
+}
+
+interface ClickedPoint {
+    featureProperties: AdminZeroFeatureProperties;
+    lngLat: mapboxgl.LngLatLike;
+}
+
+interface Props {
+    variant: 'crisis' | 'appeal';
+    presentationModeAdditionalBeforeContent?: React.ReactNode;
+    presentationModeAdditionalAfterContent?: React.ReactNode;
+    mapTitle: string;
+    bbox: LngLatBoundsLike | undefined;
+    appealResponse?: AppealResponse;
+    legendOptions: LegendOptions[];
+    onPresentationModeChange: (presentation: boolean) => void;
+    scaleOptions: ScaleOption[];
+}
+
+function OperationMapContainer(props: Props) {
+    const {
+        variant,
+        presentationModeAdditionalBeforeContent,
+        presentationModeAdditionalAfterContent,
+        mapTitle,
+        bbox,
+        appealResponse,
+        legendOptions,
+        onPresentationModeChange,
+        scaleOptions,
+    } = props;
+
+    const [scaleBy, setScaleBy] = useInputState<ScaleOption['value']>('peopleTargeted');
+    const strings = useTranslation(i18n);
+
+    const countryResponse = useCountryRaw();
+
+    const [clickedPoint, setClickedPoint] = useState<ClickedPoint | undefined>();
+
+    const countryGroupedAppeal = useMemo(
+        () => listToGroupList(
+            appealResponse?.results ?? [],
+            (appeal) => appeal.country.iso3 ?? '<no-key>',
+        ),
+        [appealResponse],
+    );
+
+    const countryCentroidGeoJson = useMemo((): GeoJSON.FeatureCollection<GeoJSON.Geometry> => {
+        const countryToOperationTypeMap = mapToMap(
+            countryGroupedAppeal,
+            (key) => key,
+            (appealList) => {
+                const uniqueAppealList = unique(
+                    appealList.map((appeal) => appeal.atype),
+                );
+
+                const uniqueEventList = unique(
+                    appealList.map((severity) => severity.event_details
+                        ?.ifrc_severity_level).filter(isDefined),
+                );
+
+                const peopleTargeted = sumSafe(
+                    appealList.map((appeal) => appeal.num_beneficiaries),
+                );
+                const financialRequirements = sumSafe(
+                    appealList.map((appeal) => appeal.amount_requested),
+                );
+
+                const severityLevel = (() => {
+                    if (uniqueEventList.length > 1) {
+                        const highestSeverity = uniqueEventList.sort((a, b) => (
+                            compareNumber(severityOrderMapping[a], severityOrderMapping[b])
+                        ));
+                        return highestSeverity[0];
+                    }
+                    if (uniqueEventList.length === 0) return undefined;
+                    return uniqueEventList[0];
+                });
+
+                const appealType = (() => {
+                    if (uniqueAppealList.length > 1) return APPEAL_TYPE_MULTIPLE;
+                    return uniqueAppealList[0];
+                });
+
+                return {
+                    appealType: appealType(),
+                    severityLevel: severityLevel(),
+                    peopleTargeted,
+                    financialRequirements,
+                };
+            },
+        );
+
+        return {
+            type: 'FeatureCollection' as const,
+            features:
+                countryResponse
+                    ?.map((country) => {
+                        if (
+                            (!country.independent && isNotDefined(country.record_type))
+                            || isNotDefined(country.centroid)
+                            || isNotDefined(country.iso3)
+                        ) {
+                            return undefined;
+                        }
+
+                        const operation = countryToOperationTypeMap[country.iso3];
+                        if (isNotDefined(operation)) {
+                            return undefined;
+                        }
+
+                        return {
+                            type: 'Feature' as const,
+                            geometry: country.centroid as {
+                                type: 'Point';
+                                coordinates: [number, number];
+                            },
+                            properties: {
+                                id: country.iso3,
+                                appealType: operation.appealType,
+                                severityLevel: operation.severityLevel,
+                                variant,
+                                peopleTargeted: operation.peopleTargeted,
+                                financialRequirements: operation.financialRequirements,
+                            },
+                        };
+                    })
+                    .filter(isDefined) ?? [],
+        };
+    }, [countryResponse, countryGroupedAppeal, variant]);
+
+    const handleCountryClick = useCallback(
+        (
+            featureProperties: AdminZeroFeatureProperties,
+            lngLat: mapboxgl.LngLatLike,
+        ) => {
+            setClickedPoint({
+                featureProperties,
+                lngLat,
+            });
+
+            return true;
+        },
+        [],
+    );
+
+    const handlePointClose = useCallback(() => {
+        setClickedPoint(undefined);
+    }, [setClickedPoint]);
+
+    const popupDetails = clickedPoint
+        ? countryGroupedAppeal[clickedPoint.featureProperties.iso3]
+        : undefined;
+
+    return (
+        <GlobalMap onAdminZeroFillClick={handleCountryClick}>
+            <GoMapContainer
+                presentationModeAdditionalAfterContent={
+                    presentationModeAdditionalAfterContent
+                }
+                presentationModeAdditionalBeforeContent={
+                    presentationModeAdditionalBeforeContent
+                }
+                withPresentationMode
+                onPresentationModeChange={onPresentationModeChange}
+                title={mapTitle}
+                footer={(
+                    <>
+                        <RadioInput
+                            label={strings.explanationBubbleScalePoints}
+                            name={undefined}
+                            options={scaleOptions}
+                            keySelector={optionKeySelector}
+                            labelSelector={optionLabelSelector}
+                            value={scaleBy}
+                            onChange={setScaleBy}
+                        />
+                        <ListView withWrap withSpacingOpticalCorrection spacing="sm">
+                            {legendOptions.map((legendItem) => (
+                                <LegendItem
+                                    key={legendItem.value}
+                                    color={legendItem.color}
+                                    label={legendItem.label}
+                                />
+                            ))}
+                        </ListView>
+                    </>
+                )}
+            />
+            <MapSource
+                sourceKey="points"
+                sourceOptions={sourceOptions}
+                geoJson={countryCentroidGeoJson}
+            >
+                <MapLayer
+                    layerKey="point-circle"
+                    layerOptions={basePointLayerOptions}
+                />
+                <MapLayer
+                    key={scaleBy}
+                    layerKey="point-outer-circle"
+                    layerOptions={scaleBy === 'peopleTargeted'
+                        ? outerCircleLayerOptionsForPeopleTargeted
+                        : outerCircleLayerOptionsForFinancialRequirements}
+                />
+            </MapSource>
+            {clickedPoint?.lngLat && (
+                <MapPopup
+                    onCloseButtonClick={handlePointClose}
+                    coordinates={clickedPoint.lngLat}
+                    heading={(
+                        <Link
+                            to="countriesLayout"
+                            urlParams={{
+                                countryId: clickedPoint.featureProperties.country_id,
+                            }}
+                        >
+                            {clickedPoint.featureProperties.name}
+                        </Link>
+                    )}
+                    withPadding
+                    empty={isNotDefined(popupDetails) || popupDetails.length === 0}
+                    emptyMessage={strings.operationPopoverEmpty}
+                >
+                    <ListView layout="block" spacing="sm" withSpacingOpticalCorrection>
+                        {popupDetails?.map((appeal) => (
+                            <Container
+                                key={appeal.id}
+                                heading={appeal.name}
+                                headerDescription={(
+                                    <TextOutput
+                                        textSize="sm"
+                                        valueType="date"
+                                        withLightText
+                                        label={strings.lastUpdateLabel}
+                                        value={appeal.modified_at}
+                                    />
+                                )}
+                                headingLevel={6}
+                                spacing="xs"
+                            >
+                                <ListView
+                                    layout="block"
+                                    spacing="2xs"
+                                    withSpacingOpticalCorrection
+                                >
+                                    <TextOutput
+                                        value={appeal.num_beneficiaries}
+                                        description={strings.operationPopoverPeopleAffected}
+                                        valueType="number"
+                                        textSize="sm"
+                                    />
+                                    <TextOutput
+                                        value={appeal.amount_requested}
+                                        description={strings.operationPopoverAmountRequested}
+                                        valueType="number"
+                                        textSize="sm"
+                                    />
+                                    <TextOutput
+                                        value={appeal.amount_funded}
+                                        description={strings.operationPopoverAmountFunded}
+                                        valueType="number"
+                                        textSize="sm"
+                                    />
+                                </ListView>
+                            </Container>
+                        ))}
+                    </ListView>
+                </MapPopup>
+            )}
+            {isDefined(bbox) && (
+                <MapBounds
+                    duration={DURATION_MAP_ZOOM}
+                    bounds={bbox}
+                    padding={DEFAULT_MAP_PADDING}
+                />
+            )}
+        </GlobalMap>
+    );
+}
+
+export default OperationMapContainer;
diff --git a/app/src/components/domain/ActiveOperationMap/i18n.json b/app/src/components/domain/ActiveOperationMap/i18n.json
index cc06c2fe56..b714d7aeb5 100644
--- a/app/src/components/domain/ActiveOperationMap/i18n.json
+++ b/app/src/components/domain/ActiveOperationMap/i18n.json
@@ -5,24 +5,24 @@
         "operationMapViewAll": "View all Operations",
         "operationMapViewAllInRegion": "View all Operations in this Region",
         "operationMapViewAllInCountry": "View all Operations in this Country",
-        "operationPopoverPeopleAffected": "People Targeted",
-        "operationPopoverAmountRequested": "Amount Requested (CHF)",
-        "operationPopoverAmountFunded": "Amount Funded (CHF)",
-        "operationPopoverEmpty": "No Current Operations",
         "operationType": "Type of Appeal",
         "operationFilterTypePlaceholder": "All Appeal Types",
         "operationDisasterType": "Disaster Type",
         "operationFilterDisastersPlaceholder": "All Disaster Types",
+        "crisisTabName": "Crisis Categorisation",
+        "appealTabName": "Appeal Types",
         "mapStartDateAfter": "Start After",
         "mapStartDateBefore": "Start Before",
-        "explanationBubbleScalePoints": "Scale points by",
-        "explanationBubblePopulationLabel": "# of people targeted",
-        "explanationBubbleAmountLabel": "IFRC financial requirements",
         "explanationBubbleEmergencyAppeal": "Emergency appeal",
         "explanationBubbleDref": "DREF",
         "explanationBubbleMultiple": "Multiple types",
         "operationMapProvinces": "Provinces",
         "operationMapClearFilters": "Clear Filters",
-        "operationFilterDistrictPlaceholder": "All Provinces"
+        "operationFilterDistrictPlaceholder": "All Provinces",
+        "crisisRedEmergency": "Red Emergency",
+        "crisisOrangeEmergency": "Orange Emergency",
+        "crisisYellowEmergency": "Yellow Emergency",
+        "explanationBubblePopulationLabel": "# of people targeted",
+        "explanationBubbleAmountLabel": "IFRC financial requirements"
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/components/domain/ActiveOperationMap/index.tsx b/app/src/components/domain/ActiveOperationMap/index.tsx
index e790bf3619..f6ba0370ff 100644
--- a/app/src/components/domain/ActiveOperationMap/index.tsx
+++ b/app/src/components/domain/ActiveOperationMap/index.tsx
@@ -7,44 +7,29 @@ import {
     Button,
     Container,
     DateInput,
-    LegendItem,
-    ListView,
-    RadioInput,
+    InlineLayout,
     SelectInput,
-    TextOutput,
+    Tab,
+    TabList,
+    Tabs,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     hasSomeDefinedValue,
     resolveToComponent,
-    sumSafe,
 } from '@ifrc-go/ui/utils';
-import {
-    isDefined,
-    isNotDefined,
-    listToGroupList,
-    mapToMap,
-    unique,
-} from '@togglecorp/fujs';
-import {
-    MapBounds,
-    MapLayer,
-    MapSource,
-} from '@togglecorp/re-map';
+import { isDefined } from '@togglecorp/fujs';
 import { type LngLatBoundsLike } from 'mapbox-gl';
 
 import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
 import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
-import GoMapContainer from '#components/GoMapContainer';
 import Link from '#components/Link';
-import MapPopup from '#components/MapPopup';
-import useCountryRaw from '#hooks/domain/useCountryRaw';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useFilterState from '#hooks/useFilterState';
-import useInputState from '#hooks/useInputState';
 import {
-    DEFAULT_MAP_PADDING,
-    DURATION_MAP_ZOOM,
+    DISASTER_CATEGORY_ORANGE,
+    DISASTER_CATEGORY_RED,
+    DISASTER_CATEGORY_YELLOW,
 } from '#utils/constants';
 import type {
     GoApiResponse,
@@ -52,19 +37,17 @@ import type {
 } from '#utils/restRequest';
 import { useRequest } from '#utils/restRequest';
 
-import GlobalMap, { type AdminZeroFeatureProperties } from '../GlobalMap';
+import OperationMapContainer from './OperationMapContainer';
 import {
     APPEAL_TYPE_DREF,
     APPEAL_TYPE_EMERGENCY,
     APPEAL_TYPE_MULTIPLE,
-    basePointLayerOptions,
     COLOR_DREF,
     COLOR_EMERGENCY_APPEAL,
     COLOR_MULTIPLE_TYPES,
-    optionKeySelector,
-    optionLabelSelector,
-    outerCircleLayerOptionsForFinancialRequirements,
-    outerCircleLayerOptionsForPeopleTargeted,
+    COLOR_ORANGE_SEVERITY,
+    COLOR_RED_SEVERITY,
+    COLOR_YELLOW_SEVERITY,
     type ScaleOption,
 } from './utils';
 
@@ -78,14 +61,6 @@ const appealTypeKeySelector = (option: AppealTypeOption) => option.key;
 const appealTypeLabelSelector = (option: AppealTypeOption) => option.value;
 
 const now = new Date().toISOString();
-const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
-    type: 'geojson',
-};
-
-interface ClickedPoint {
-    featureProperties: AdminZeroFeatureProperties;
-    lngLat: mapboxgl.LngLatLike;
-}
 
 type BaseProps = {
     className?: string;
@@ -93,20 +68,20 @@ type BaseProps = {
     presentationModeAdditionalBeforeContent?: React.ReactNode;
     presentationModeAdditionalAfterContent?: React.ReactNode;
     mapTitle: string;
-}
+};
 
 type CountryProps = {
     variant: 'country';
     countryId: number;
-}
+};
 type RegionProps = {
     variant: 'region';
     regionId: number;
-}
+};
 
 type GlobalProps = {
     variant: 'global';
-}
+};
 
 type Props = BaseProps & (RegionProps | GlobalProps | CountryProps);
 
@@ -121,6 +96,7 @@ function ActiveOperationMap(props: Props) {
     } = props;
 
     const [presentationMode, setPresentationMode] = useState(false);
+    const [activeTab, setActiveTab] = useState<'crisis' | 'appeal'>('crisis');
 
     const {
         filter,
@@ -130,11 +106,11 @@ function ActiveOperationMap(props: Props) {
         setFilter,
         setFilterField,
     } = useFilterState<{
-        appeal?: AppealTypeOption['key'],
-        district?: number[],
-        displacement?: number,
-        startDateAfter?: string,
-        startDateBefore?: string,
+        appeal?: AppealTypeOption['key'];
+        district?: number[];
+        displacement?: number;
+        startDateAfter?: string;
+        startDateBefore?: string;
     }>({
         filter: {},
         pageSize: 9999,
@@ -152,6 +128,10 @@ function ActiveOperationMap(props: Props) {
                 dtype: filter.displacement,
                 district: hasSomeDefinedValue(filter.district) ? filter.district : undefined,
                 end_date__gt: now,
+                // NOTE: Filtering only those appeals that has not been confirmed
+                // and does not contain event
+                has_event: true,
+                needs_confirmation: false,
                 start_date__gte: filter.startDateAfter,
                 start_date__lte: filter.startDateBefore,
                 limit,
@@ -170,12 +150,6 @@ function ActiveOperationMap(props: Props) {
         [variant, regionId, filter, limit, countryId],
     );
 
-    const [
-        clickedPoint,
-        setClickedPoint,
-    ] = useState<ClickedPoint| undefined>();
-
-    const [scaleBy, setScaleBy] = useInputState<ScaleOption['value']>('peopleTargeted');
     const strings = useTranslation(i18n);
     const { api_appeal_type: appealTypeOptionsRaw } = useGlobalEnums();
     const {
@@ -194,117 +168,6 @@ function ActiveOperationMap(props: Props) {
         )
     ), [appealTypeOptionsRaw]);
 
-    const countryResponse = useCountryRaw();
-
-    const scaleOptions: ScaleOption[] = useMemo(() => ([
-        { value: 'peopleTargeted', label: strings.explanationBubblePopulationLabel },
-        { value: 'financialRequirements', label: strings.explanationBubbleAmountLabel },
-    ]), [
-        strings.explanationBubblePopulationLabel,
-        strings.explanationBubbleAmountLabel,
-    ]);
-
-    const legendOptions = useMemo(() => ([
-        {
-            value: APPEAL_TYPE_EMERGENCY,
-            label: strings.explanationBubbleEmergencyAppeal,
-            color: COLOR_EMERGENCY_APPEAL,
-        },
-        {
-            value: APPEAL_TYPE_DREF,
-            label: strings.explanationBubbleDref,
-            color: COLOR_DREF,
-        },
-        {
-            value: APPEAL_TYPE_MULTIPLE,
-            label: strings.explanationBubbleMultiple,
-            color: COLOR_MULTIPLE_TYPES,
-        },
-    ]), [
-        strings.explanationBubbleEmergencyAppeal,
-        strings.explanationBubbleDref,
-        // FIXME: string to be removed
-        // strings.explanationBubbleEAP,
-        strings.explanationBubbleMultiple,
-    ]);
-
-    const countryGroupedAppeal = useMemo(() => (
-        listToGroupList(
-            appealResponse?.results ?? [],
-            (appeal) => appeal.country.iso3 ?? '<no-key>',
-        )
-    ), [appealResponse]);
-
-    const countryCentroidGeoJson = useMemo(
-        (): GeoJSON.FeatureCollection<GeoJSON.Geometry> => {
-            const countryToOperationTypeMap = mapToMap(
-                countryGroupedAppeal,
-                (key) => key,
-                (appealList) => {
-                    const uniqueAppealList = unique(
-                        appealList.map((appeal) => appeal.atype),
-                    );
-
-                    const peopleTargeted = sumSafe(
-                        appealList.map((appeal) => appeal.num_beneficiaries),
-                    );
-                    const financialRequirements = sumSafe(
-                        appealList.map((appeal) => appeal.amount_requested),
-                    );
-
-                    if (uniqueAppealList.length > 1) {
-                        // multiple types
-                        return {
-                            appealType: APPEAL_TYPE_MULTIPLE,
-                            peopleTargeted,
-                            financialRequirements,
-                        };
-                    }
-
-                    return {
-                        appealType: uniqueAppealList[0],
-                        peopleTargeted,
-                        financialRequirements,
-                    };
-                },
-            );
-
-            return {
-                type: 'FeatureCollection' as const,
-                features: countryResponse
-                    ?.map((country) => {
-                        if (
-                            (!country.independent && isNotDefined(country.record_type))
-                            || isNotDefined(country.centroid)
-                            || isNotDefined(country.iso3)
-                        ) {
-                            return undefined;
-                        }
-
-                        const operation = countryToOperationTypeMap[country.iso3];
-                        if (isNotDefined(operation)) {
-                            return undefined;
-                        }
-
-                        return {
-                            type: 'Feature' as const,
-                            geometry: country.centroid as {
-                                type: 'Point',
-                                coordinates: [number, number],
-                            },
-                            properties: {
-                                id: country.iso3,
-                                appealType: operation.appealType,
-                                peopleTargeted: operation.peopleTargeted,
-                                financialRequirements: operation.financialRequirements,
-                            },
-                        };
-                    }).filter(isDefined) ?? [],
-            };
-        },
-        [countryResponse, countryGroupedAppeal],
-    );
-
     const allAppealsType = useMemo(() => {
         if (isDefined(countryId)) {
             return {
@@ -335,235 +198,193 @@ function ActiveOperationMap(props: Props) {
         { numAppeals: appealResponse?.count ?? '--' },
     );
 
-    const handleCountryClick = useCallback((
-        featureProperties: AdminZeroFeatureProperties,
-        lngLat: mapboxgl.LngLatLike,
-    ) => {
-        setClickedPoint({
-            featureProperties,
-            lngLat,
-        });
-
-        return true;
+    const handlePresentationMode = useCallback((presentation: boolean) => {
+        setPresentationMode(presentation);
     }, []);
 
-    const handlePointClose = useCallback(
-        () => {
-            setClickedPoint(undefined);
-        },
-        [setClickedPoint],
-    );
-
     const handleClearFiltersButtonClick = useCallback(() => {
         setFilter({});
     }, [setFilter]);
 
-    const popupDetails = clickedPoint
-        ? countryGroupedAppeal[clickedPoint.featureProperties.iso3]
-        : undefined;
-
     const [districtOptions, setDistrictOptions] = useState<DistrictItem[] | null | undefined>();
 
+    const handleTabChanges = useCallback(
+        (name: 'crisis' | 'appeal') => {
+            setActiveTab(name);
+        },
+        [],
+    );
+
+    const legendOptions = useMemo(() => {
+        if (activeTab === 'appeal') {
+            return ([
+                {
+                    value: APPEAL_TYPE_EMERGENCY,
+                    label: strings.explanationBubbleEmergencyAppeal,
+                    color: COLOR_EMERGENCY_APPEAL,
+                },
+                {
+                    value: APPEAL_TYPE_DREF,
+                    label: strings.explanationBubbleDref,
+                    color: COLOR_DREF,
+                },
+                {
+                    value: APPEAL_TYPE_MULTIPLE,
+                    label: strings.explanationBubbleMultiple,
+                    color: COLOR_MULTIPLE_TYPES,
+                },
+            ]);
+        }
+        return ([
+            {
+                value: DISASTER_CATEGORY_RED,
+                label: strings.crisisRedEmergency,
+                color: COLOR_RED_SEVERITY,
+            },
+            {
+                value: DISASTER_CATEGORY_ORANGE,
+                label: strings.crisisOrangeEmergency,
+                color: COLOR_ORANGE_SEVERITY,
+            },
+            {
+                value: DISASTER_CATEGORY_YELLOW,
+                label: strings.crisisYellowEmergency,
+                color: COLOR_YELLOW_SEVERITY,
+            },
+        ]);
+    }, [strings, activeTab]);
+
+    const scaleOptions: ScaleOption[] = useMemo(
+        () => [
+            {
+                value: 'peopleTargeted',
+                label: strings.explanationBubblePopulationLabel,
+            },
+            {
+                value: 'financialRequirements',
+                label: strings.explanationBubbleAmountLabel,
+            },
+        ],
+        [
+            strings.explanationBubblePopulationLabel,
+            strings.explanationBubbleAmountLabel,
+        ],
+    );
+
     return (
-        <Container
-            pending={appealPending}
-            filtered={filtered}
-            errored={isDefined(appealError)}
-            overlayPending
-            className={className}
-            heading={!presentationMode && heading}
-            withHeaderBorder={!presentationMode}
-            filters={!presentationMode && (
-                <>
-                    <DateInput
-                        name="startDateAfter"
-                        label={strings.mapStartDateAfter}
-                        onChange={setFilterField}
-                        value={rawFilter.startDateAfter}
-                    />
-                    <DateInput
-                        name="startDateBefore"
-                        label={strings.mapStartDateBefore}
-                        onChange={setFilterField}
-                        value={rawFilter.startDateBefore}
-                    />
-                    {variant === 'country' && (
-                        <DistrictSearchMultiSelectInput
-                            name="district"
-                            placeholder={strings.operationFilterDistrictPlaceholder}
-                            label={strings.operationMapProvinces}
-                            value={rawFilter.district}
-                            options={districtOptions}
-                            onOptionsChange={setDistrictOptions}
-                            onChange={setFilterField}
-                            countryId={countryId}
-                        />
-                    )}
-                    <SelectInput
-                        placeholder={strings.operationFilterTypePlaceholder}
-                        label={strings.operationType}
-                        name="appeal"
-                        value={rawFilter.appeal}
-                        onChange={setFilterField}
-                        keySelector={appealTypeKeySelector}
-                        labelSelector={appealTypeLabelSelector}
-                        options={appealTypeOptions}
-                    />
-                    <DisasterTypeSelectInput
-                        placeholder={strings.operationFilterDisastersPlaceholder}
-                        label={strings.operationDisasterType}
-                        name="displacement"
-                        value={rawFilter.displacement}
-                        onChange={setFilterField}
-                    />
-                    <Button
-                        name={undefined}
-                        onClick={handleClearFiltersButtonClick}
-                        disabled={!filtered}
-                    >
-                        {strings.operationMapClearFilters}
-                    </Button>
-                </>
-            )}
-            headerActions={!presentationMode && (
-                <Link
-                    to="allAppeals"
-                    urlSearch={allAppealsType.searchParam}
-                    withLinkIcon
-                    withUnderline
-                >
-                    {allAppealsType.title}
-                </Link>
-            )}
+        <Tabs
+            onChange={handleTabChanges}
+            value={activeTab}
+            styleVariant="nav"
         >
-            <GlobalMap onAdminZeroFillClick={handleCountryClick}>
-                <GoMapContainer
+            <Container
+                pending={appealPending}
+                filtered={filtered}
+                errored={isDefined(appealError)}
+                overlayPending
+                className={className}
+                heading={!presentationMode && heading}
+                withHeaderBorder={!presentationMode}
+                filters={
+                    !presentationMode && (
+                        <>
+                            <DateInput
+                                name="startDateAfter"
+                                label={strings.mapStartDateAfter}
+                                onChange={setFilterField}
+                                value={rawFilter.startDateAfter}
+                            />
+                            <DateInput
+                                name="startDateBefore"
+                                label={strings.mapStartDateBefore}
+                                onChange={setFilterField}
+                                value={rawFilter.startDateBefore}
+                            />
+                            {variant === 'country' && (
+                                <DistrictSearchMultiSelectInput
+                                    name="district"
+                                    placeholder={strings.operationFilterDistrictPlaceholder}
+                                    label={strings.operationMapProvinces}
+                                    value={rawFilter.district}
+                                    options={districtOptions}
+                                    onOptionsChange={setDistrictOptions}
+                                    onChange={setFilterField}
+                                    countryId={countryId}
+                                />
+                            )}
+                            <SelectInput
+                                placeholder={strings.operationFilterTypePlaceholder}
+                                label={strings.operationType}
+                                name="appeal"
+                                value={rawFilter.appeal}
+                                onChange={setFilterField}
+                                keySelector={appealTypeKeySelector}
+                                labelSelector={appealTypeLabelSelector}
+                                options={appealTypeOptions}
+                            />
+                            <DisasterTypeSelectInput
+                                placeholder={strings.operationFilterDisastersPlaceholder}
+                                label={strings.operationDisasterType}
+                                name="displacement"
+                                value={rawFilter.displacement}
+                                onChange={setFilterField}
+                            />
+                            <Button
+                                name={undefined}
+                                onClick={handleClearFiltersButtonClick}
+                                disabled={!filtered}
+                            >
+                                {strings.operationMapClearFilters}
+                            </Button>
+                        </>
+                    )
+                }
+                headerActions={
+                    !presentationMode && (
+                        <Link
+                            to="allAppeals"
+                            urlSearch={allAppealsType.searchParam}
+                            withLinkIcon
+                            withUnderline
+                        >
+                            {allAppealsType.title}
+                        </Link>
+                    )
+                }
+            >
+                <InlineLayout
+                    after={(
+                        <TabList>
+                            <Tab
+                                name="crisis"
+                            >
+                                {strings.crisisTabName}
+                            </Tab>
+                            <Tab
+                                name="appeal"
+                            >
+                                {strings.appealTabName}
+                            </Tab>
+                        </TabList>
+                    )}
+                />
+                <OperationMapContainer
+                    variant={activeTab}
                     presentationModeAdditionalAfterContent={
                         presentationModeAdditionalAfterContent
                     }
                     presentationModeAdditionalBeforeContent={
                         presentationModeAdditionalBeforeContent
                     }
-                    withPresentationMode
-                    onPresentationModeChange={setPresentationMode}
-                    title={mapTitle}
-                    footer={(
-                        <>
-                            <RadioInput
-                                label={strings.explanationBubbleScalePoints}
-                                name={undefined}
-                                options={scaleOptions}
-                                keySelector={optionKeySelector}
-                                labelSelector={optionLabelSelector}
-                                value={scaleBy}
-                                onChange={setScaleBy}
-                            />
-                            <ListView
-                                withWrap
-                                withSpacingOpticalCorrection
-                                spacing="sm"
-                            >
-                                {legendOptions.map((legendItem) => (
-                                    <LegendItem
-                                        key={legendItem.value}
-                                        color={legendItem.color}
-                                        label={legendItem.label}
-                                    />
-                                ))}
-                            </ListView>
-                        </>
-                    )}
+                    onPresentationModeChange={handlePresentationMode}
+                    mapTitle={mapTitle}
+                    bbox={bbox}
+                    appealResponse={appealResponse}
+                    scaleOptions={scaleOptions}
+                    legendOptions={legendOptions}
                 />
-                <MapSource
-                    sourceKey="points"
-                    sourceOptions={sourceOptions}
-                    geoJson={countryCentroidGeoJson}
-                >
-                    <MapLayer
-                        layerKey="point-circle"
-                        layerOptions={basePointLayerOptions}
-                    />
-                    <MapLayer
-                        key={scaleBy}
-                        layerKey="point-outer-circle"
-                        layerOptions={
-                            scaleBy === 'peopleTargeted'
-                                ? outerCircleLayerOptionsForPeopleTargeted
-                                : outerCircleLayerOptionsForFinancialRequirements
-                        }
-                    />
-                </MapSource>
-                {clickedPoint?.lngLat && (
-                    <MapPopup
-                        onCloseButtonClick={handlePointClose}
-                        coordinates={clickedPoint.lngLat}
-                        heading={(
-                            <Link
-                                to="countriesLayout"
-                                urlParams={{
-                                    countryId: clickedPoint.featureProperties.country_id,
-                                }}
-                            >
-                                {clickedPoint.featureProperties.name}
-                            </Link>
-                        )}
-                        withPadding
-                        empty={isNotDefined(popupDetails) || popupDetails.length === 0}
-                        emptyMessage={strings.operationPopoverEmpty}
-                    >
-                        <ListView
-                            layout="block"
-                            spacing="sm"
-                            withSpacingOpticalCorrection
-                        >
-                            {popupDetails?.map(
-                                (appeal) => (
-                                    <Container
-                                        key={appeal.id}
-                                        heading={appeal.name}
-                                        headingLevel={6}
-                                        spacing="xs"
-                                    >
-                                        <ListView
-                                            layout="block"
-                                            spacing="2xs"
-                                            withSpacingOpticalCorrection
-                                        >
-                                            <TextOutput
-                                                value={appeal.num_beneficiaries}
-                                                description={strings.operationPopoverPeopleAffected}
-                                                valueType="number"
-                                                textSize="sm"
-                                            />
-                                            <TextOutput
-                                                value={appeal.amount_requested}
-                                                description={strings
-                                                    .operationPopoverAmountRequested}
-                                                valueType="number"
-                                                textSize="sm"
-                                            />
-                                            <TextOutput
-                                                value={appeal.amount_funded}
-                                                description={strings.operationPopoverAmountFunded}
-                                                valueType="number"
-                                                textSize="sm"
-                                            />
-                                        </ListView>
-                                    </Container>
-                                ),
-                            )}
-                        </ListView>
-                    </MapPopup>
-                )}
-                {isDefined(bbox) && (
-                    <MapBounds
-                        duration={DURATION_MAP_ZOOM}
-                        bounds={bbox}
-                        padding={DEFAULT_MAP_PADDING}
-                    />
-                )}
-            </GlobalMap>
-        </Container>
+            </Container>
+        </Tabs>
     );
 }
 
diff --git a/app/src/components/domain/ActiveOperationMap/utils.ts b/app/src/components/domain/ActiveOperationMap/utils.ts
index a8bbeeee88..5e9bba16f1 100644
--- a/app/src/components/domain/ActiveOperationMap/utils.ts
+++ b/app/src/components/domain/ActiveOperationMap/utils.ts
@@ -4,18 +4,26 @@ import type {
 } from 'mapbox-gl';
 
 import {
-    COLOR_BLACK,
     COLOR_BLUE,
+    COLOR_DREF_YELLOW,
+    COLOR_LIGHT_GREY,
     COLOR_ORANGE,
     COLOR_RED,
-    COLOR_YELLOW,
+    DISASTER_CATEGORY_ORANGE,
+    DISASTER_CATEGORY_RED,
+    DISASTER_CATEGORY_YELLOW,
+    type DisasterCategory,
 } from '#utils/constants';
 
 export const COLOR_EMERGENCY_APPEAL = COLOR_RED;
-export const COLOR_DREF = COLOR_YELLOW;
+export const COLOR_DREF = COLOR_DREF_YELLOW;
 export const COLOR_EAP = COLOR_BLUE;
 export const COLOR_MULTIPLE_TYPES = COLOR_ORANGE;
 
+export const COLOR_YELLOW_SEVERITY = COLOR_DREF_YELLOW;
+export const COLOR_ORANGE_SEVERITY = COLOR_ORANGE;
+export const COLOR_RED_SEVERITY = COLOR_RED;
+
 // FIXME: these must be a constant defined somewhere else
 export const APPEAL_TYPE_DREF = 0;
 export const APPEAL_TYPE_EMERGENCY = 1;
@@ -23,18 +31,42 @@ export const APPEAL_TYPE_EMERGENCY = 1;
 export const APPEAL_TYPE_EAP = 3;
 export const APPEAL_TYPE_MULTIPLE = -1;
 
+export const severityOrderMapping: Record<DisasterCategory, number> = {
+    [DISASTER_CATEGORY_RED]: 1,
+    [DISASTER_CATEGORY_ORANGE]: 2,
+    [DISASTER_CATEGORY_YELLOW]: 3,
+};
+
 const circleColor: CirclePaint['circle-color'] = [
     'match',
-    ['get', 'appealType'],
-    APPEAL_TYPE_DREF,
-    COLOR_DREF,
-    APPEAL_TYPE_EMERGENCY,
-    COLOR_EMERGENCY_APPEAL,
-    APPEAL_TYPE_EAP,
-    COLOR_EAP,
-    APPEAL_TYPE_MULTIPLE,
-    COLOR_MULTIPLE_TYPES,
-    COLOR_BLACK,
+    ['get', 'variant'],
+    'appeal',
+    [
+        'match',
+        ['get', 'appealType'],
+        APPEAL_TYPE_DREF,
+        COLOR_DREF,
+        APPEAL_TYPE_EMERGENCY,
+        COLOR_EMERGENCY_APPEAL,
+        APPEAL_TYPE_EAP,
+        COLOR_EAP,
+        APPEAL_TYPE_MULTIPLE,
+        COLOR_MULTIPLE_TYPES,
+        COLOR_LIGHT_GREY,
+    ],
+    'crisis',
+    [
+        'match',
+        ['get', 'severityLevel'],
+        DISASTER_CATEGORY_ORANGE,
+        COLOR_ORANGE_SEVERITY,
+        DISASTER_CATEGORY_RED,
+        COLOR_RED_SEVERITY,
+        DISASTER_CATEGORY_YELLOW,
+        COLOR_YELLOW_SEVERITY,
+        COLOR_LIGHT_GREY,
+    ],
+    COLOR_LIGHT_GREY,
 ];
 
 const basePointPaint: CirclePaint = {
diff --git a/app/src/components/domain/AppealsTable/index.tsx b/app/src/components/domain/AppealsTable/index.tsx
index 665405b795..d4295ef840 100644
--- a/app/src/components/domain/AppealsTable/index.tsx
+++ b/app/src/components/domain/AppealsTable/index.tsx
@@ -236,6 +236,10 @@ function AppealsTable(props: Props) {
                 ordering: orderingWithFallback,
                 atype: filter.appeal,
                 dtype: filter.displacement,
+                // NOTE: Filtering those appeals that has not been confirmed and does not
+                // contain event
+                has_event: true,
+                needs_confirmation: false,
                 district: hasSomeDefinedValue(filter.district) ? filter.district : undefined,
                 end_date__gt: withPastOperations ? undefined : now,
                 start_date__gte: filter.startDateAfter,
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 4848debfa0..fc0b0b3ae6 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -65,6 +65,7 @@ export const COLOR_DARK_GREY = '#a5a5a5';
 export const COLOR_BLACK = '#000000';
 // const COLOR_LIGHT_YELLOW = '#ffd470';
 export const COLOR_YELLOW = '#ff9e00';
+export const COLOR_DREF_YELLOW = '#FFF939';
 export const COLOR_BLUE = '#4c5d9b';
 export const COLOR_LIGHT_BLUE = '#c7d3e0';
 export const COLOR_ORANGE = '#ff8000';
diff --git a/app/src/views/EmergencyDetails/i18n.json b/app/src/views/EmergencyDetails/i18n.json
index 28b56d96be..6257da0d48 100644
--- a/app/src/views/EmergencyDetails/i18n.json
+++ b/app/src/views/EmergencyDetails/i18n.json
@@ -3,7 +3,7 @@
     "strings": {
         "emergencyKeyFiguresTitle": "Key Figures",
         "emergencyOverviewTitle": "Emergency Overview",
-        "disasterCategorization": "Disaster Categorization",
+        "disasterCategorisation": "Disaster Categorisation",
         "disasterType": "Disaster Type",
         "GLIDENumber": "GLIDE Number",
         "startDate": "Start Date",
diff --git a/app/src/views/EmergencyDetails/index.tsx b/app/src/views/EmergencyDetails/index.tsx
index 56eb8eb8b6..788ad2e35a 100644
--- a/app/src/views/EmergencyDetails/index.tsx
+++ b/app/src/views/EmergencyDetails/index.tsx
@@ -203,7 +203,7 @@ export function Component() {
                         numPreferredGridColumns={3}
                     >
                         <TextOutput
-                            label={strings.disasterCategorization}
+                            label={strings.disasterCategorisation}
                             value={(
                                 <ListView
                                     withWrap
diff --git a/go-api b/go-api
index 05524db6e6..05cf9032fa 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit 05524db6e6c5dcd01555937560a4d6ece15aa58d
+Subproject commit 05cf9032fa2288bb9b6b6f34584fba626ab9a733

From a78123634d97d8a64ceaaffa7e6fc34c8f48bf56 Mon Sep 17 00:00:00 2001
From: Shreeyash Shrestha <shreeyash.shrestha@togglecorp.com>
Date: Mon, 4 May 2026 12:00:13 +0545
Subject: [PATCH 3/4] feat:(severity): update severity level colorMap in
 SeverityIndicator

---
 .../components/domain/SeverityIndicator/index.tsx    | 12 +++++++++---
 go-api                                               |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/src/components/domain/SeverityIndicator/index.tsx b/app/src/components/domain/SeverityIndicator/index.tsx
index 753498c337..f202492342 100644
--- a/app/src/components/domain/SeverityIndicator/index.tsx
+++ b/app/src/components/domain/SeverityIndicator/index.tsx
@@ -4,6 +4,12 @@ import {
 } from '@ifrc-go/ui';
 import { isNotDefined } from '@togglecorp/fujs';
 
+import {
+    COLOR_ORANGE_SEVERITY,
+    COLOR_RED_SEVERITY,
+    COLOR_YELLOW_SEVERITY,
+} from '../ActiveOperationMap/utils';
+
 interface Props extends Omit<ColorPreviewProps, 'value'> {
     level: number | undefined | null;
     title?: string;
@@ -17,9 +23,9 @@ function SeverityIndicator(props: Props) {
     } = props;
 
     const colorMap: Record<number, string | undefined> = {
-        0: 'var(--go-ui-color-yellow)',
-        1: 'var(--go-ui-color-orange)',
-        2: 'var(--go-ui-color-red)',
+        0: COLOR_YELLOW_SEVERITY,
+        1: COLOR_ORANGE_SEVERITY,
+        2: COLOR_RED_SEVERITY,
     };
 
     if (isNotDefined(level)) {
diff --git a/go-api b/go-api
index 05cf9032fa..fc04c79feb 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit 05cf9032fa2288bb9b6b6f34584fba626ab9a733
+Subproject commit fc04c79feb68d8f4ec063a3a6acaa23e82bd0132

From c22a7a7835d63691f4ed277f599d1c23974e0b11 Mon Sep 17 00:00:00 2001
From: Shreeyash Shrestha <shreeyash.shrestha@togglecorp.com>
Date: Tue, 17 Mar 2026 17:05:36 +0545
Subject: [PATCH 4/4] chore(changeset): add changeset for update in active
 operation map

---
 .changeset/five-rooms-follow.md               |   8 ++
 .../000081-1777960104686.json                 | 121 ++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 .changeset/five-rooms-follow.md
 create mode 100644 translationMigrations/000081-1777960104686.json

diff --git a/.changeset/five-rooms-follow.md b/.changeset/five-rooms-follow.md
new file mode 100644
index 0000000000..44d8bb6fe3
--- /dev/null
+++ b/.changeset/five-rooms-follow.md
@@ -0,0 +1,8 @@
+---
+"go-web-app": patch
+---
+
+Update Active Operation Map in homepage
+
+- Display map data based on emergency severity levels
+- Update legend and map to reflect crisis and appeals types
diff --git a/translationMigrations/000081-1777960104686.json b/translationMigrations/000081-1777960104686.json
new file mode 100644
index 0000000000..26782b534d
--- /dev/null
+++ b/translationMigrations/000081-1777960104686.json
@@ -0,0 +1,121 @@
+{
+    "parent": "000080-1777541728949.json",
+    "actions": [
+        {
+            "action": "add",
+            "key": "appealTabName",
+            "namespace": "activeOperationMap",
+            "value": "Appeal Types"
+        },
+        {
+            "action": "add",
+            "key": "crisisOrangeEmergency",
+            "namespace": "activeOperationMap",
+            "value": "Orange Emergency"
+        },
+        {
+            "action": "add",
+            "key": "crisisRedEmergency",
+            "namespace": "activeOperationMap",
+            "value": "Red Emergency"
+        },
+        {
+            "action": "add",
+            "key": "crisisTabName",
+            "namespace": "activeOperationMap",
+            "value": "Crisis Categorisation"
+        },
+        {
+            "action": "add",
+            "key": "crisisYellowEmergency",
+            "namespace": "activeOperationMap",
+            "value": "Yellow Emergency"
+        },
+        {
+            "action": "add",
+            "key": "lastUpdateLabel",
+            "namespace": "activeOperationMap",
+            "value": "Last update"
+        },
+        {
+            "action": "add",
+            "key": "disasterCategorisation",
+            "namespace": "emergencyDetails",
+            "value": "Disaster Categorisation"
+        },
+        {
+            "action": "remove",
+            "key": "disasterCategorization",
+            "namespace": "emergencyDetails"
+        },
+        {
+            "action": "add",
+            "key": "emergencyHoldingERUTitle",
+            "namespace": "surgeOverview",
+            "value": "NS Holding the ERU"
+        },
+        {
+            "action": "add",
+            "key": "emergencySupportERUTitle",
+            "namespace": "surgeOverview",
+            "value": "NS Supporting the ERU"
+        },
+        {
+            "action": "add",
+            "key": "eruHoldingERUTitle",
+            "namespace": "surgeOverview",
+            "value": "NS Holding this ERU"
+        },
+        {
+            "action": "add",
+            "key": "eruReadinessNoData",
+            "namespace": "surgeOverview",
+            "value": "Data not available"
+        },
+        {
+            "action": "add",
+            "key": "eruSupportERUTitle",
+            "namespace": "surgeOverview",
+            "value": "NS Supporting this ERU"
+        },
+        {
+            "action": "add",
+            "key": "nationalReadinessNoData",
+            "namespace": "surgeOverview",
+            "value": "Data not available"
+        },
+        {
+            "action": "remove",
+            "key": "eruNSEquipmentReadiness",
+            "namespace": "surgeOverview"
+        },
+        {
+            "action": "remove",
+            "key": "eruNSFundingReadiness",
+            "namespace": "surgeOverview"
+        },
+        {
+            "action": "remove",
+            "key": "eruPeopleReadiness",
+            "namespace": "surgeOverview"
+        },
+        {
+            "action": "update",
+            "key": "eruEquipmentReadiness",
+            "newKey": "equipmentReadiness",
+            "namespace": "surgeOverview"
+        },
+        {
+            "action": "update",
+            "key": "eruFundingReadiness",
+            "newKey": "fundingReadiness",
+            "namespace": "surgeOverview"
+        },
+        {
+            "action": "update",
+            "key": "eruNSPeopleReadiness",
+            "newKey": "peopleReadiness",
+            "namespace": "surgeOverview"
+        }
+    ]
+}
\ No newline at end of file