feat: add new tabs for surge

Author: barshathakuri

app/src/App/routes/SurgeRoutes.tsx

@@ -63,6 +63,60 @@ const surgeOverview = customWrapRoute({
     },
 });
 
+const activeSurgeDeployments = customWrapRoute({
+    parent: surgeLayout,
+    path: 'active-surge-deployments',
+    component: {
+        render: () => import('#views/ActiveSurgeDeployments'),
+        props: {},
+    },
+    context: {
+        title: 'Active Surge Deployments',
+        visibility: 'anything',
+    },
+});
+
+const rapidResponsePersonnel = customWrapRoute({
+    parent: surgeOverview,
+    path: 'rapid-response-personnel',
+    component: {
+        render: () => import('#views/SurgeOverview/RapidResponsePersonnel'),
+        props: {},
+    },
+    context: {
+        title: 'Rapid Response Personnel',
+        visibility: 'anything',
+    },
+});
+
+const emergencyResponseUnit = customWrapRoute({
+    parent: surgeOverview,
+    path: 'emergency-response-unit',
+    component: {
+        render: () => import('#views/SurgeOverview/EmergencyResponseUnit'),
+        props: {},
+    },
+    context: {
+        title: 'Emergency Response Unit',
+        visibility: 'anything',
+    },
+});
+
+const updateERUReadinessForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'update-eru-readiness',
+    component: {
+        // TODO: Add ERUReadinessUpdateForm Route
+        render: () => import('#views/Home'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'ERU Readiness Update Form',
+        visibility: 'anything',
+    },
+});
+
 const surgeOperationalToolbox = customWrapRoute({
     parent: surgeLayout,
     path: 'operational-toolbox',
@@ -1423,7 +1477,7 @@ const deploymentCatalogueIndex = customWrapRoute({
     },
     wrapperComponent: Auth,
     context: {
-        title: 'Catalogue of surge services',
+        title: 'Catalogue of Surge Services',
         visibility: 'anything',
     },
 });
@@ -1438,7 +1492,7 @@ const deploymentCatalogueChildren = customWrapRoute({
     },
     wrapperComponent: Auth,
     context: {
-        title: 'Catalogue of surge services',
+        title: 'Catalogue of Surge Services',
         visibility: 'anything',
     },
 });
@@ -1555,4 +1609,8 @@ export default {
     deploymentCatalogueChildren,
     deploymentOthers,
     obsoleteUrlDeployments,
+    activeSurgeDeployments,
+    rapidResponsePersonnel,
+    emergencyResponseUnit,
+    updateERUReadinessForm,
 };

app/src/components/Navbar/i18n.json

@@ -68,6 +68,7 @@
         "userMenuPERCatalogueItem":"PER Catalogue of Resources",
         "userMenuPERCatalogueItemDescription":"PER Catalogue of Resources contains resource relevant to strengthening resource and capacity.",
         "userMenuGoResourcesItem":"GO Resources",
-        "userMenuGoResourcesItemDescription":"Find all relevant user guides, references videos, IFRC other resources, and GO contacts on this page."
+        "userMenuGoResourcesItemDescription":"Find all relevant user guides, references videos, IFRC other resources, and GO contacts on this page.",
+        "userMenuActiveSurgeDeployments": "Active Surge Deployments"
     }
 }

app/src/components/Navbar/index.tsx

@@ -367,6 +367,13 @@ function Navbar(props: Props) {
                                 <div className={styles.description}>
                                     {strings.userMenuSurge}
                                 </div>
+                                <DropdownMenuItem
+                                    type="link"
+                                    to="activeSurgeDeployments"
+                                    variant="tertiary"
+                                >
+                                    {strings.userMenuActiveSurgeDeployments}
+                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     type="link"
                                     to="surgeOverview"

app/src/views/ActiveSurgeDeployments/index.tsx

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <>Active Surge Deployments</>
+    );
+}
+
+Component.displayName = 'Active Surge Deployments';

app/src/views/Surge/i18n.json

@@ -7,6 +7,7 @@
         "deploymentsThisYearTitle": "Deployments This Year",
         "surgeOverviewTab": "Surge Overview",
         "operationalToolboxTab": "Operational Toolbox",
-        "surgeCatalogueTab": "Catalogue of Surge services"
+        "surgeCatalogueTab": "Catalogue of Surge Services",
+        "activeSurgeDeploymentsTab": "Active Surge Deployments"
     }
 }

app/src/views/Surge/index.tsx

@@ -65,8 +65,14 @@ export function Component() {
             )}
         >
             <NavigationTabList>
+                <NavigationTab
+                    to="activeSurgeDeployments"
+                >
+                    {strings.activeSurgeDeploymentsTab}
+                </NavigationTab>
                 <NavigationTab
                     to="surgeOverview"
+                    parentRoute
                 >
                     {strings.surgeOverviewTab}
                 </NavigationTab>
@@ -77,7 +83,6 @@ export function Component() {
                 </NavigationTab>
                 <NavigationTab
                     to="surgeCatalogueLayout"
-                    parentRoute
                 >
                     {strings.surgeCatalogueTab}
                 </NavigationTab>

app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx

@@ -0,0 +1,15 @@
+import Link from '#components/Link';
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <Link
+            to="updateERUReadinessForm"
+            variant="primary"
+        >
+            Update ERU Readiness
+        </Link>
+    );
+}
+
+Component.displayName = 'EmergencyResponseUnit';

app/src/views/SurgeOverview/RapidResponsePersonnel/index.tsx

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <>
+            Rapid Response Personnel
+        </>
+    );
+}
+
+Component.displayName = 'RapidResponsePersonnel';

app/src/views/SurgeOverview/i18n.json

@@ -2,6 +2,8 @@
     "namespace": "surgeOverview",
     "strings": {
         "topFiveNationalSociety": "Top 5 NS Deploying Rapid Response Personnel ({year})",
-        "ongoingDeployments": "Ongoing Deployments Over The Last Year"
+        "ongoingDeployments": "Ongoing Deployments Over The Last Year",
+        "rapidResponsePersonnelTitle": "Rapid Response Personnel",
+        "emergencyResponseUnitTitle": "Emergency Response Unit"
     }
 }

app/src/views/SurgeOverview/index.tsx

@@ -2,9 +2,11 @@ import {
     useCallback,
     useMemo,
 } from 'react';
+import { Outlet } from 'react-router-dom';
 import {
     BarChart,
     Container,
+    NavigationTabList,
     TimeSeriesChart,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -14,6 +16,7 @@ import {
     resolveToString,
 } from '@ifrc-go/ui/utils';
 
+import NavigationTab from '#components/NavigationTab';
 import { useRequest } from '#utils/restRequest';
 import { type GoApiResponse } from '#utils/restRequest';
 
@@ -96,6 +99,19 @@ export function Component() {
 
     return (
         <div className={styles.surgeOverview}>
+            <NavigationTabList variant="secondary">
+                <NavigationTab
+                    to="rapidResponsePersonnel"
+                >
+                    {strings.rapidResponsePersonnelTitle}
+                </NavigationTab>
+                <NavigationTab
+                    to="emergencyResponseUnit"
+                >
+                    {strings.emergencyResponseUnitTitle}
+                </NavigationTab>
+            </NavigationTabList>
+            <Outlet />
             <SurgeMap />
             <div className={styles.charts}>
                 <Container